Streaming de UI con Suspense y estados de carga
Mejore el rendimiento percibido transmitiendo UI renderizada en el servidor con React Suspense, archivos loading.tsx y skeletons para que los usuarios vean el contenido antes.
Streaming de UI con Suspense y estados de carga es una lección gratuita de Next.js 15 Fullstack (App Router + Server Actions) en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack (App Router + Server Actions), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack (App Router + Server Actions) incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
The Waterfall Problem
If a page waits for every data fetch before rendering, users stare at a blank screen. Streaming lets the server send ready parts of the page immediately and fill in slow parts as they finish.
What is Streaming SSR?
Next.js with the App Router can stream HTML in chunks. The shell and fast components arrive first; slow data-dependent sections stream in when ready, improving Time to First Byte and perceived speed.
React Suspense Basics
Suspense wraps a component that may not be ready and shows a fallback until it is. The rest of the page renders without waiting.
import { Suspense } from 'react';
<Suspense fallback={<p>Loading...</p>}>
<SlowComponent />
</Suspense>Async Server Components
In the App Router, a Server Component can be async and await data. Wrapping it in Suspense lets the page stream while that fetch resolves.
async function Reviews() {
const data = await getReviews();
return <ReviewList items={data} />;
}Streaming a Slow Section
Render the page shell instantly and stream the slow part. Users interact with the rest while reviews load.
export default function Page() {
return (
<main>
<Header />
<Suspense fallback={<ReviewsSkeleton />}>
<Reviews />
</Suspense>
</main>
);
}The loading.tsx Convention
A loading.tsx file beside a route automatically wraps that route's page in Suspense. Its export is shown instantly while the page's data loads.
// app/dashboard/loading.tsx
export default function Loading() {
return <DashboardSkeleton />;
}Building a Skeleton
A skeleton mimics the final layout with gray placeholders, reducing layout shift and signaling that content is coming.
function ReviewsSkeleton() {
return (
<div className="animate-pulse space-y-2">
<div className="h-4 bg-gray-200 rounded" />
<div className="h-4 bg-gray-200 rounded w-3/4" />
</div>
);
}Parallel Data Fetching
Avoid sequential awaits that create waterfalls. Multiple Suspense boundaries let independent sections fetch in parallel and stream as each completes.
<Suspense fallback={<A />}><Sales /></Suspense>
<Suspense fallback={<B />}><Traffic /></Suspense>Granular Boundaries
Place Suspense around the smallest slow unit, not the whole page. Finer boundaries mean more of the UI is interactive sooner.
Streaming vs Static
Streaming shines for personalized or slow data. For content that rarely changes, static generation or caching is still faster. Combine both: cache what you can, stream the rest.
Best Practices
Stream effectively:
- Wrap slow async Server Components in Suspense
- Use loading.tsx for route-level fallbacks
- Show skeletons to cut layout shift
- Use parallel boundaries to avoid waterfalls
Quick Check
Test your streaming knowledge.
Recap
You learned to stream UI:
- Streaming SSR sends ready HTML first and fills slow parts later
- Wrap async components in
Suspensewith a fallback - Use
loading.tsxfor automatic route fallbacks - Show skeletons and use parallel boundaries
Your pages now feel fast even with slow data.
Preguntas frecuentes
¿La lección «Streaming de UI con Suspense y estados de carga» es gratis?
Sí — el texto completo de «Streaming de UI con Suspense y estados de carga» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack (App Router + Server Actions), actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack (App Router + Server Actions) incluye 4 lecciones en total.
¿Qué aprenderé en «Streaming de UI con Suspense y estados de carga»?
Mejore el rendimiento percibido transmitiendo UI renderizada en el servidor con React Suspense, archivos loading.tsx y skeletons para que los usuarios vean el contenido antes. Practicas Next.js 15 Fullstack (App Router + Server Actions) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Next.js 15 Fullstack (App Router + Server Actions)?
No se requiere experiencia previa. Next.js 15 Fullstack (App Router + Server Actions) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Streaming de UI con Suspense y estados de carga»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack (App Router + Server Actions)?
Sí. Cada lección de Next.js 15 Fullstack (App Router + Server Actions) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Optimización de imágenes y fuentes
- Análisis del tamaño del bundle
- Estrategias avanzadas de caché
- Streaming de UI con Suspense y estados de carga