Streaming React

Streaming usa límites Suspense con Server Components asíncronos. No se pueden usar hooks en límites Suspense.

import { Suspense } from "react";

export default async function StreamingPage() {
  return (
    <div>
      <Suspense fallback={<div>Cargando...</div>}>
        <AsyncComponent />
      </Suspense>
    </div>
  );
}

async function AsyncComponent() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return <div>{data.message}</div>;
}

• •Los componentes son funciones asíncronas (sin directiva 'use client')
• •No se pueden usar hooks React (incluido use hook) en Server Components
• •Envuelve componentes asíncronos con Suspense y proporciona fallback
• •Usa loading.js para estados de carga a nivel de ruta
• •El contenido se transmite al cliente conforme está disponible