Hidratación de React con hydrateRoot en SSR

Curso de Server Side Render o SSR con React.js

Contenido del curso

No sé dónde empezar

Fundamentos de SSR

Crea tu primer app con SSR

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:38

Hidratación de React con hydrateRoot en SSR

Curso de Server Side Render o SSR con React.js

Clase 11 de 17

Clase 11 / 17

Recursos

El proceso de hidratación en server-side rendering con React es el paso final para que tu aplicación pase de ser HTML estático enviado desde el servidor a una aplicación interactiva en el navegador. Si estás trabajando con SSR y necesitas activar el JavaScript del cliente sobre el árbol de elementos ya renderizado, aquí tienes el flujo completo.

La idea base es sencilla: el servidor envía una instantánea del DOM como texto plano y, una vez que el navegador la recibe, React toma ese árbol existente y lo hidrata con los event handlers y la lógica de JavaScript correspondiente.

Cómo configurar el build del cliente con Webpack

Antes de hidratar, necesitas un bundle del cliente que el navegador pueda consumir. Para eso, ajustas la configuración de Webpack y agregas un script en el package.json.

Qué cambios hago en la configuración de Webpack

La configuración del cliente reutiliza la base anterior, con un ajuste clave: eliminar el plugin que generaba el archivo HTML automáticamente. Como el HTML ya se envía desde el servidor, ese plugin sobra [01:00].

En package.json agregas un script build:client con la misma estructura del script de servidor, pero apuntando a la configuración del cliente. Al ejecutar yarn build:client, deberías ver en la carpeta dist el app.js y el favicon.ico listos para servirse [01:50].

¿Por qué quitar el HtmlWebpackPlugin en SSR? Porque el servidor ya genera el HTML inicial con el árbol de React. Si dejas el plugin, terminas con dos HTML compitiendo y el cliente sobreescribe lo que envió el servidor.

Cómo unifico los builds en un solo comando

Para no correr dos comandos por separado, creas un script build que setea NODE_ENV=production y ejecuta primero build:client y luego build:server. Así, al hacer yarn build, se generan ambos bundles dentro de dist [02:30].

Después agregas un script start que corre build y luego node dist/index.js, que es el entry point de tu servidor Express.

Cómo expongo el JavaScript del cliente desde Express

Aunque el servidor ya esté vivo en localhost, el navegador todavía no recibe el app.js. Para servir esos archivos estáticos usas el middleware express.static, que viene incluido en Express.

Apuntas el middleware a la carpeta dist y, en tu template.ts, agregas una etiqueta <script src="app.js" type="text/javascript"></script> justo donde corresponda en el HTML que envías al cliente [04:10]. Recuerda que esa etiqueta no es JSX, así que necesitas la etiqueta de cierre completa.

Con esto, el navegador descarga el bundle y ejecuta React sobre el HTML ya renderizado.

Cómo evitar el doble render al hidratar React

Uno de los errores más comunes en SSR aparece justo aquí: ves la aplicación renderizada dos veces, como si hubiera dos documentos empalmados.

Por qué ocurre el doble render

Cuando el JavaScript se ejecuta, React inserta su árbol de elementos al inicio del HTML, y luego encuentra el div id="app" con el contenido que vino del servidor. El resultado: contenido duplicado.

La solución es asegurarte de que el HTML generado por el servidor se inyecte dentro del div id="app", no fuera de él. Así React reconoce ese contenedor como el punto exacto donde debe hidratar [05:30].

Cuándo uso hydrateRoot en lugar de createRoot

En index.tsx, el cambio crítico es reemplazar createRoot por hydrateRoot. Mientras createRoot crea desde cero el árbol de React, hydrateRoot toma el HTML existente y le agrega la capa interactiva.

tsx import { hydrateRoot } from 'react-dom/client';

hydrateRoot(container, <App />);

No necesitas guardar el resultado en una variable root ni llamar a .render() después, porque hydrateRoot recibe directamente el componente como segundo parámetro [06:20].

¿Qué hace exactamente hydrateRoot? Conecta los event listeners y el estado de React al HTML que ya existe en el DOM, sin volver a renderizarlo. Es la función oficial de React 18 para aplicaciones con SSR.

Cómo verifico que el server-side rendering funciona

La prueba definitiva es desactivar JavaScript en el navegador y recargar la página. Si sigues viendo el contenido renderizado, el servidor está enviando correctamente el HTML inicial.

Luego reactivas JavaScript, recargas y revisas la pestaña Sources de las DevTools: ahí debe aparecer app.js servido desde tu Express [08:10]. Si lo ves, el ciclo completo de SSR está cerrado.

Un detalle fácil de pasar por alto: la variable NODE_ENV=production no solo debe estar al hacer el build, también al levantar el servidor con start. Si la olvidas en el segundo paso, algunas optimizaciones de React no se activan.

Qué viene después de la hidratación: prefetching

Con la hidratación funcionando, ya tienes SSR completo, pero todavía no aprovechas todo el potencial del servidor. En la vista de galaxias, por ejemplo, se renderizan alrededor de 100 elementos cuyos datos siguen pidiéndose desde el cliente con un hook.

El siguiente paso es el prefetching: mover esa petición al lado del servidor, de modo que el HTML llegue al navegador con los datos ya incluidos. Eso reduce el tiempo de carga percibido y mejora el SEO de tu aplicación.

¿Ya implementaste hydrateRoot en algún proyecto propio? Cuéntame en los comentarios qué errores te aparecieron al hacer el cambio desde createRoot.

David Rangel

Hace 6 meses•editado

En mi caso para que funcionara tuve que modificar el index.ts del server para evitar alertas de CORS y el webpack.config.client.js para evitar problemas las peticiones con requiere y para evitar que el build del server se sobrescribiera el build del cliente: (pero las galaxias aun no me cargan me parece que es igual por temas de cors)

// src/server/index.ts
import express, { Express, Request, Response } from 'express';

import { config } from './config';
import { render } from '../render';

const app: Express = express();

app.use(express.static('dist'));

app.use((req: Request, res: Response, next: any) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; " +
      "script-src 'self' 'unsafe-inline'; " +
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
      "font-src 'self' https://fonts.gstatic.com; " +
      "img-src 'self' data: https://i.imgur.com; " +
      "connect-src 'self' http://localhost:* ws://localhost:*;",
  );
  next();
});

app.get('/{\*splat}', (req: Request, res: Response) => {
  res.send(render(req.url));
});

app.use((err: any, res: Response) => {
  console.error('🌊 Alerta de naufragio:', err.message);
  res.status(500).send('Algo salió mal en la bodega del barco.');
});

app.listen(config.PORT, () => {
  console.log(`Listenting in http://localhost:${config.PORT}`);
});


// webpack.config.client.js
const path = require('path');
const dotenv = require('dotenv');
const nodeExternals = require('webpack-node-externals');

dotenv.config();

const mode = process.env.NODE_ENV ?? 'production';
const isDev = process.env.NODE_ENV !== 'production';

module.exports = {
  name: 'client',
  target: 'web',
  entry: './src/app/index.tsx',
  mode,
  devtool: isDev ? 'eval-source-map' : undefined,
  stats: 'errors-only',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'client.bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts)?$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
                minify: !isDev,
              },
            },
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.ico$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devServer: {
    hot: true,
    port: process.env.PORT || 3600,
    open: true,
    historyApiFallback: true,
  },
};

David Rangel

Hace 6 meses•editado

Sí, no podía cargar las galaxias por el CORS:

import express, { Express, Request, Response } from 'express';

import { config } from './config';
import { render } from '../render';

const app: Express = express();

app.use(express.static('dist'));

app.use((req: Request, res: Response, next: any) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; " +
      "script-src 'self' 'unsafe-inline'; " +
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
      "font-src 'self' https://fonts.gstatic.com; " +
      "img-src 'self' data: https://i.imgur.com https://images-assets.nasa.gov; " +
      "connect-src 'self' http://localhost:* ws://localhost:* https://images-api.nasa.gov;",
  );
  next();
});

app.get('/{\*splat}', (req: Request, res: Response) => {
  res.send(render(req.url));
});

app.use((err: any, res: Response) => {
  console.error('🌊 Alerta de naufragio:', err.message);
  res.status(500).send('Algo salió mal en la bodega del barco.');
});

app.listen(config.PORT, () => {
  console.log(`Listenting in http://localhost:${config.PORT}`);
});

Comentarios (10)10 comentarios

Ivan González

Hace 3 años

Kike Vanegas

Victor Morales Mèndez

Hace 4 años

Nicolas Forero Quevedo

Lorenzo Peñalver

Kengya Moncada

Hace 2 años

Sebastián Andrés Sanhueza Tapia

Hace un año

Jesus Manuel Hernandez Diaz

Juan Carlos Montilla Sánchez

Yakira Jaraba pineda

Mario Fernando Robayo Restrepo

Diego Reyes Cabrera

Carlos Rodríguez

Fundamentos de SSR

Por qué React necesita server-side rendering

Problemas reales de las SPAs con JavaScript

Creación y Funcionamiento de una SPA con Create React App

CSR vs SSR: cómo el servidor pinta primero

Ventajas y desventajas del server-side rendering

Crea tu primer app con SSR

Proyecto Helix Eye: de CSR a SSR

Webpack para servidor Node con TypeScript

Servidor Express con TypeScript desde cero

Función template HTML dinámica en TypeScript

renderToString y StaticRouter en el servidor

Hidratación de React con hydrateRoot en SSR

Prefetching de API en el servidor con Axios

Inyectando initialProps del servidor a React

Cómo inyectar estilos de SSR sin flickering

Bonus

Hot Module Replacement con Webpack y Express

Tu motor SSR vs Next.js en práctica

Helix Eye como proyecto de portafolio

Hidratación de React con hydrateRoot en SSR

Progreso del curso

Fundamentos de SSR

Crea tu primer app con SSR

Bonus

Recursos

Recursos