Renderizado e Hidratación de React con Server-Side Rendering

¿Cómo completar el proceso de server-side rendering?

Cada vez estamos más cerca de completar el proceso de server-side rendering en nuestra aplicación de React. Este proceso lleva consigo varias etapas, desde la generación del template hasta el envío del primer árbol del DOM en formato texto plano. El último paso es hidratar nuestra aplicación de React con JavaScript y algunas configuraciones adicionales del lado del cliente. El objetivo es lograr que nuestra aplicación funcione adecuadamente tanto en el servidor como en el cliente.

¿Cómo se configura el build del cliente?

Para configurar el build del cliente, empezamos modificando el archivo package.json. Se agrega un script que utiliza la configuración de Webpack que habíamos utilizado previamente. Aquí es importante retirar el plugin de Webpack que genera HTML, ya que ahora el HTML se enviará directamente desde el servidor. El nuevo script de build se nombrará 'client', y es crucial asegurarse de que esta configuración se genere correctamente, limpiando la carpeta dist y ejecutando el build para verificar los resultados.

{
  "scripts": {
    "build:client": "webpack --config webpack.client.config.js"
  }
}

¿Cómo crear un script de build general?

La creación de un script de build general es fundamental para el correcto funcionamiento de nuestra aplicación, ya que permite construir tanto el cliente como el servidor. Para ello, configuramos el entorno de node a producción y aseguramos que el script sea capaz de realizar builds separadas para cada parte de la aplicación.

{
  "scripts": {
    "build": "NODE_ENV=production npm run build:client && npm run build:server"
  }
}

¿Cómo exponer JavaScript desde el servidor?

Para exponer el JavaScript generado desde el servidor, utilizamos un middleware de Express llamado static, que permite servir archivos estáticos al cliente. Esta configuración se hace sobre la carpeta dist donde se generó el build del cliente.

app.use(express.static(path.join(__dirname, 'dist')));

Adicionalmente, es necesario modificar el template.tsx para incluir una etiqueta <script> que refiera al archivo JavaScript del cliente. Este archivo se carga en el momento preciso para permitir la correcta hidratación de los elementos.

<script src="/app.js" type="text/javascript"></script>

¿Cómo evitar el doble render en React?

Durante el proceso de hidratación es común enfrentar un doble render de nuestra aplicación. Para solucionar este inconveniente, es crucial ajustar el HTML generado y almacenarlo directamente dentro del div con id="app", que es donde React inserta la aplicación.

En el archivo index.tsx, se sustituye el método createRoot por hydrateRoot para aprovechar la estructura ya existente del árbol de elementos, lo que evita la duplicación de contenido durante la ejecución del JavaScript.

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

hydrateRoot(document.getElementById('app'), <App />);

¿Cómo verificar el funcionamiento del server-side rendering?

Para comprobar que el server-side rendering está funcionando correctamente, basta con desactivar JavaScript en el navegador y recargar la aplicación. Si el contenido aún es visible, significa que el renderizado del lado del servidor está implementado con éxito. Al reactivar JavaScript, la aplicación debería hidratarse y funcionar sin problemas. Además, es posible verificar en la pestaña de "sources" que el servidor está enviando el archivo app.js.

Este proceso asegura que nuestra aplicación de React se comporte adecuadamente, funcionando tanto en modo client-side como server-side rendering. Además, en las próximas etapas se explorarán otras optimizaciones y técnicas de mejora como el prefetching, que incrementarán la eficiencia del servidor y la experiencia del usuario final. ¡Sigue adelante y continúa explorando el fascinante mundo del server-side rendering en React!