Cuando trabajas con server side rendering en React, uno de los pasos más importantes es trasladar los datos que ya obtuviste en el servidor hacia el cliente sin repetir peticiones innecesarias. Aquí se aborda exactamente ese proceso: cómo tomar las galaxias obtenidas desde la API de la NASA en el servidor y hacerlas disponibles en la aplicación del lado del cliente, enfrentando además el problema de hidratación que esto puede generar.
¿Cómo se inyectan las props iniciales desde el servidor?
El punto de partida es el archivo index.tsx dentro de la carpeta App, que funciona como el lugar donde ocurre la hidratación [0:07]. Aquí se crea una constante llamada initialProps que toma su valor del objeto window.initialProps, un objeto que el servidor debería haber generado mediante una etiqueta <script> inyectada en el HTML.
javascript
const initialProps = window.initialProps;
console.log(initialProps);
Este patrón permite que los datos viajen del servidor al cliente sin necesidad de un segundo fetch. Las initialProps se pasan como propiedades al componente App, que a su vez las desestructura y las envía al componente de la página Galaxies.
¿Por qué cambiar Link por etiquetas anchor?
Al usar React Router DOM, el componente Link realiza redirecciones del lado del cliente, lo que significa que nunca se ejecuta una nueva solicitud al servidor [1:15]. Para que el server side rendering funcione correctamente y cada ruta reciba su HTML pre-renderizado, se reemplazan todos los Link por etiquetas <a> (anchor) estándar.
- El routing será más lento porque cada cambio de ruta implica una solicitud al servidor.
- A cambio, se obtiene el beneficio del prefetching: los datos llegan ya resueltos en el HTML.
- No hay una opción mejor o peor, son intercambios (trade-offs) entre velocidad de navegación y optimización de carga inicial.
¿Cómo se protege el componente con default props?
Para evitar que la aplicación falle si las propiedades no llegan, se configuran default props en el componente Galaxies [4:05]:
javascript
Galaxies.defaultProps = {
galaxies: []
};
Además, se muestra un spinner cuando props.galaxies.length es igual a cero, garantizando una experiencia visual consistente mientras no existan datos disponibles.
¿Qué es el error de hidratación y por qué ocurre?
Al recargar la página de galaxias en modo desarrollo, aparece un error de hidratación [5:40]. Este error sucede porque la versión del DOM que genera el servidor no coincide exactamente con la que React espera construir en el cliente.
Para diagnosticarlo, se cambia el entorno de producción a development en el package.json, tanto en el script start como en build [5:10]. Esto permite ver los errores sin ofuscación.
"start": "... --mode development",
"build": "... --mode development"
Al desactivar JavaScript en el debugger del navegador, se puede inspeccionar exactamente lo que envía el servidor [6:15]. En este caso, el HTML del servidor no incluye todas las tarjetas de galaxias que sí aparecen tras la hidratación en el cliente.
¿Cómo maneja React el mismatch de hidratación?
Cuando React detecta que el HTML del servidor y el resultado del cliente no coinciden, toma la versión del cliente como la correcta [7:20]. Esto significa que la aplicación sigue funcionando, aunque se muestre una advertencia en consola.
- La inyección de props realizada es un enfoque básico pero funcional.
- Frameworks como Next.js resuelven esto con mecanismos más sofisticados a nivel de request.
- A pesar del mismatch, el beneficio se mantiene: el HTML llega más rápido al navegador y se ahorra la petición duplicada desde el cliente.
El principio fundamental queda claro: enviar datos desde el servidor mediante window.initialProps, pasarlos como propiedades a los componentes y aceptar que la inyección básica puede generar diferencias de hidratación que React resuelve automáticamente. En la siguiente sesión se aborda otro problema pendiente: el manejo correcto de los estilos en server side rendering. ¿Has enfrentado problemas similares con la hidratación en tus proyectos?
