Cómo funciona React SSR internamente
Siga el flujo de renderToString/renderToPipeableStream y comprenda cómo el cliente reanuda la hidratación.
Cómo funciona React SSR internamente es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 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 que resuelve SSR
React del lado del cliente necesita JavaScript para renderizar. Los usuarios ven una página en blanco hasta que JavaScript se carga y se ejecuta. SSR pre-renderiza el HTML en el servidor para que los usuarios vean el contenido de inmediato, lo que mejora el rendimiento percibido y el SEO.
renderToString
La API de SSR original: renderToString(<App />) renderiza sincrónicamente el árbol de componentes como una cadena HTML en el servidor.
import { renderToString } from 'react-dom/server';
import App from './App';
// In an Express handler:
app.get('*', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html><body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body></html>
`);
});Hidratación en el cliente
Después de recibir el HTML, el navegador lo analiza y renderiza la interfaz. A continuación, hydrateRoot() de React conecta los controladores de eventos y hace interactivo el HTML estático; esto se denomina hidratación.
// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root'), <App />);Qué ocurre durante la hidratación
React recorre simultáneamente el DOM renderizado en el servidor y el DOM virtual. Si coinciden, React conecta los controladores sin modificar el DOM. Si difieren, registra una advertencia de hidratación y corrige el DOM.
renderToPipeableStream
La API de streaming de React 18 envía el HTML en fragmentos a medida que los datos están disponibles, lo que permite al navegador mostrar progresivamente el contenido mientras el servidor continúa procesando.
import { renderToPipeableStream } from 'react-dom/server';
app.get('*', (req, res) => {
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res); // starts streaming
},
});
});Suspense y streaming
Con SSR mediante streaming, los límites de Suspense envían primero el contenido alternativo y luego lo reemplazan por el contenido real cuando los datos se resuelven, sin bloquear el envío inicial del HTML.
// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
return (
<Layout>
<Suspense fallback={<Skeleton />}>
<UserProfile /> {/* streams after data loads */}
</Suspense>
</Layout>
);
}Serialización de datos
Los datos obtenidos en el servidor deben serializarse e integrarse en el HTML para que el cliente pueda leerlos durante la hidratación sin volver a obtenerlos.
// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');
// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`
// Client hydration reads:
const data = window.__INITIAL_DATA__;Diferencias entre entornos
El código del servidor se ejecuta en Node.js, no en un navegador. El código que hace referencia a window, document o localStorage falla en el servidor. Protéjalo con typeof window !== 'undefined'.
const isBrowser = typeof window !== 'undefined';
function getTheme() {
if (!isBrowser) return 'light'; // server-safe default
return localStorage.getItem('theme') ?? 'light';
}React Server Components frente a SSR
SSR renderiza los componentes como HTML en cada solicitud. React Server Components (RSC) son diferentes: su JavaScript nunca se envía al cliente y pueden ser asíncronos, pero RSC requiere un bundler compatible con el protocolo RSC (Next.js, etc.).
Ventajas de rendimiento del streaming
El SSR mediante streaming mejora el Time To First Byte (TTFB) de la estructura inicial y permite una hidratación selectiva: el navegador puede hidratar islas interactivas antes de que termine de llegar todo el HTML de la página.
Comprobación rápida
¿Qué hace hydrateRoot() de React de forma diferente a createRoot() cuando ya existe HTML generado por el servidor?
Repaso
SSR utiliza renderToPipeableStream para enviar HTML antes de que se cargue JavaScript. El cliente llama a hydrateRoot() para conectar los controladores de eventos al HTML del servidor. El SSR mediante streaming con Suspense envía primero la estructura inicial y completa el contenido de forma asíncrona. Proteja las API del navegador con typeof window !== 'undefined'.
Preguntas frecuentes
¿La lección «Cómo funciona React SSR internamente» es gratis?
Sí — el texto completo de «Cómo funciona React SSR internamente» 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 «Cómo funciona React SSR internamente»?
Siga el flujo de renderToString/renderToPipeableStream y comprenda cómo el cliente reanuda la hidratación. 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 1 de 4.
¿Cuánto tiempo toma la lección «Cómo funciona React SSR internamente»?
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