Hidratación selectiva y HTML en streaming
Utilice límites de Suspense para transmitir fragmentos HTML e hidratar primero las islas interactivas.
Hidratación selectiva y HTML en streaming es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
El problema de hidratar páginas completas
El SSR tradicional hidrata toda la página de una vez. Si una parte de la página utiliza mucho JavaScript (como un mapa o un gráfico), bloquea la hidratación del resto, incluidos los botones interactivos sencillos.
Streaming de HTML con renderToPipeableStream
La API de streaming de React 18 envía el HTML en fragmentos. La estructura de la página llega de inmediato; los límites de Suspense completan el contenido a medida que se resuelve, de modo que los usuarios ven la interfaz antes de que todos los datos estén listos.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});Cómo funciona el streaming en la práctica
React renderiza inmediatamente los componentes que no se suspenden (la estructura inicial). Cuando se resuelven los datos de un límite de Suspense, React envía un fragmento HTML para completarlo, además de una etiqueta de script que indica al navegador dónde colocarlo.
Hidratación selectiva
Con el streaming, React 18 puede hidratar los componentes de forma independiente. Si un usuario hace clic en un elemento que aún no se ha hidratado, React prioriza la hidratación de ese componente y después continúa con el resto.
Los límites de Suspense como unidades de streaming
Cada límite de <Suspense> es una unidad de streaming. El fallback se envía de inmediato; el contenido real llega mediante streaming más adelante. Anide límites de Suspense para aplicar streaming con el nivel de granularidad adecuado.
function App() {
return (
<Layout>
{/* Streams first — no data needed */}
<Header />
<Suspense fallback={<ArticleSkeleton />}>
{/* Streams when article data resolves */}
<Article />
</Suspense>
<Suspense fallback={<CommentsSkeleton />}>
{/* Streams independently from Article */}
<Comments />
</Suspense>
</Layout>
);
}Streaming de Next.js con loading.tsx
En el App Router de Next.js, loading.tsx es el fallback de Suspense. La estructura base de la página (layout) se transmite primero; el contenido de la página se transmite cuando se resuelve su función asíncrona.
// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
return <ArticleSkeleton />;
}
// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
const posts = await fetchPosts(); // data fetch happens server-side
return <PostList posts={posts} />;
}Client Components dentro de Suspense
Los Server Components usan Suspense para transmitir datos. Los Client Components usan Suspense para la carga diferida. Ambos se benefician de la hidratación selectiva.
// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}Hidratación basada en prioridades
Si el usuario interactúa con un componente que todavía no se ha hidratado (por ejemplo, mediante un clic), React 18 hidrata ese componente de forma síncrona y prioritaria, antes de completar la hidratación del resto de la página.
onShellReady frente a onAllReady
onShellReady se ejecuta cuando la estructura base (las partes que no están suspendidas) está lista para transmitirse. onAllReady se ejecuta cuando todo se ha renderizado; resulta útil para la generación estática o cuando debe enviar todo el HTML de una sola vez.
// For streaming (progressive rendering):
onShellReady() { pipe(res); }
// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }AbortController
Pase la señal de AbortController para cancelar el SSR de renderizados lentos (por ejemplo, cuando se supera el tiempo de espera).
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
const { pipe } = renderToPipeableStream(<App />, {
signal: controller.signal,
onShellReady() { pipe(res); },
});
clearTimeout(timeoutId);Medición del impacto del streaming
Use Lighthouse o WebPageTest para medir el tiempo hasta el primer byte (TTFB) y el Largest Contentful Paint (LCP) antes y después de activar el streaming, y así cuantificar la mejora.
Comprobación rápida
¿Qué sucede en la hidratación selectiva de React 18 cuando el usuario hace clic en un elemento que todavía no se ha hidratado?
Resumen
El SSR mediante streaming usa renderToPipeableStream y límites de Suspense para enviar el HTML progresivamente. Cada límite de Suspense se transmite de forma independiente. La hidratación selectiva da prioridad a los elementos con los que el usuario ha interactuado. En Next.js, loading.tsx es el fallback automático de Suspense para el streaming a nivel de página.
Preguntas frecuentes
¿La lección «Hidratación selectiva y HTML en streaming» es gratis?
Sí — el texto completo de «Hidratación selectiva y HTML en streaming» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Hidratación selectiva y HTML en streaming»?
Utilice límites de Suspense para transmitir fragmentos HTML e hidratar primero las islas interactivas. Practicas React Academy 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 React Academy?
No se requiere experiencia previa. React Academy 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 3 de 4.
¿Cuánto tiempo toma la lección «Hidratación selectiva y HTML en streaming»?
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 React Academy?
Sí. Cada lección de React Academy 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
- Cómo funciona React SSR internamente
- Errores de hidratación: causas y soluciones
- Hidratación selectiva y HTML en streaming
- Patrón de arquitectura de islas