Inyección de Props en React para Server-Side Rendering

Clase 13 de 17 • Curso de Server Side Render o SSR con React.js

Resumen

¿Cómo inyectar props desde el servidor a React?

Introducir propiedades del servidor a nuestra aplicación React es crucial para optimizar su rendimiento. El concepto es aprovechar al máximo el server-side rendering (SSR) y mejorar la experiencia del usuario minimizando las solicitudes HTTP innecesarias. A continuación, te guiaré a través del proceso de inyección de propiedades utilizando la API de la NASA como ejemplo.

¿Qué pasos seguir para estructurar el código?

Primero, identifica tu punto de entrada en el archivo del proyecto, en este caso index.tcx. Aquí es donde ocurre la "hidratación", es decir, donde React vincula el HTML renderizado del servidor con las funciones interactivas del cliente.

Creación de una constante: Define initialProps para almacenar las propiedades que vienen desde el servidor. Esto se realiza mediante:
```
const initialProps = window.initialProps;
```
Verificación de contenido: Utiliza console.log(initialProps) para corroborar que los datos se están obteniendo correctamente del objeto window.

Resolver problemas al cambiar de rutas

El uso de react-router-dom puede implicar ciertas peculiaridades al cambiar rutas. Aquí, es recomendable cambiar componentes de Link por etiquetas A, lo que afecta cómo se manejan las redirecciones:

Reemplaza los componentes Link con:

<a href="/ruta-deseada">Texto del enlace</a>

Reinicia el servidor después de los cambios para asegurar su aplicación adecuada.

Manejo de errores comunes de hidratación

Algunas veces, los errores de hidratación pueden surgir al comparar el DOM del servidor con el del cliente. Aquí te ofrezco una solución:

Errores en la hidratación: Usualmente, estos errores ocurren cuando las versiones del servidor y del cliente del DOM no coinciden.

Configuración en package.json: Cambia el entorno de start a development para ayudar en la lectura de errores más claros durante el proceso de depuración. Esto se logra modificando:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

¿Por qué es importante la inyección de props?

La ventaja principal es recibir una carga más rápida del HTML, ya que se omiten las solicitudes HTTP adicionales. React, en caso de encontrar un error de hidratación, optará por la versión que encuentra en el cliente, sin embargo, recibir las props directamente del servidor nos permite tener una comunicación más eficiente.

Este método aumenta el rendimiento en aplicaciones complejas, y aunque puede llevar tiempo acostumbrarse, es un paso hacia aplicaciones más sofisticadas.

Recomendaciones finales

Optimización continua: Mantén una práctica activa de revisión y mejora del código.
Aprendizaje constante: Explora herramientas avanzadas como Next.js para integrar server-side rendering más robusto.

Sigue practicando y no te desanimes por los errores. Cada inconveniente es una oportunidad para aprender algo nuevo y ser un desarrollador más competente. ¡Adelante!