Optimus Agency | Desarrollo Web Profesional

page.tsx

Next.js 29: Streaming de datos lentos con Suspense

easy⏱ 5 mincoursenextjs

Los límites de Suspense hacen streaming de forma independiente

Cada límite <Suspense> hace streaming según su propio ritmo. El contenido rápido fuera de cualquier límite se renderiza de inmediato; todo lo que está dentro de un límite muestra su fallback hasta que sus datos se resuelven, y luego se intercambia — sin bloquear nada más en la página.

// app/books/[id]/page.tsx
export default async function BookPage({ params }) {
  return (
    <>
      <BookHeader id={params.id} /> {/* fast — renders immediately */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews id={params.id} /> {/* slow — streams in later */}
      </Suspense>
      <Suspense fallback={<RelatedSkeleton />}>
        <RelatedBooks id={params.id} /> {/* streams independently */}
      </Suspense>
    </>
  );
}

Cada límite es independiente

Reviews y RelatedBooks no se esperan entre sí — el que se resuelva primero llega primero por streaming. Varios límites de Suspense en una misma página permiten que secciones lentas y no relacionadas terminen en su propio momento.

Obsérvalo llegar por streaming

Haz clic en 'Visit Book Page' y anota el orden en que aparecen las cosas: primero el título, luego reviews (2.2s), luego related books (3s) — aunque related books se pidió al mismo tiempo que reviews.

Next.js 29: Streaming de datos lentos con Suspense

easy⏱ 5 mincoursenextjs

Los límites de Suspense hacen streaming de forma independiente

// app/books/[id]/page.tsx export default async function BookPage({ params }) { return ( <> <BookHeader id={params.id} /> {/* fast — renders immediately */} <Suspense fallback={<ReviewsSkeleton />}> <Reviews id={params.id} /> {/* slow — streams in later */} </Suspense> <Suspense fallback={<RelatedSkeleton />}> <RelatedBooks id={params.id} /> {/* streams independently */} </Suspense> </> ); }

Cada límite es independiente

Obsérvalo llegar por streaming