Implementación de Server Side Rendering en NodeJS

¿Cómo implementar Server-Side Rendering (SSR) en código?

Entender cómo llevar la carga de procesamiento desde el cliente al servidor no solo mejora el rendimiento, sino que también ofrece una mejor experiencia al usuario. Aquí veremos cómo aplicar Server-Side Rendering (SSR) en un proyecto de JavaScript y las diferencias en su implementación.

Preparación del entorno

Para empezar, es crucial tener un proyecto con la estructura adecuada y haber hecho una instalación básica utilizando npm. Este es el proceso inicial:

1. Configuración del proyecto: Crea un nuevo branch de trabajo usando git:

   git checkout -b home_advares_optimización_SR cinco_with_SR
   

2. Preparación de dependencias: Instala todas las dependencias necesarias:

   npm install
   

Implementación de SSR

Cambios en la estructura del proyecto

El objetivo principal es mover la lógica de renderizado desde el cliente hacia el servidor. Aquí te explico paso a paso:

1. Reestructuración de carpetas:

   • Mueve la lógica de renderización desde source/carruselItems a una nueva carpeta llamada SSR/carruselItems.

2. Ajuste de módulos:

   • Transforma la lógica de los módulos de ECMAScript 6 (usando import y export) a CommonJS para su compatibilidad con Node.js, donde se usarán require y module.exports.

Implementación y cambios en los archivos

1. Archivo render.js:

   • Este archivo se encarga de conectar con la API, obtener datos y generar un string de HTML usando una herramienta llamada Hyperscript:

   const hyperscript = require('hyperscript');
   const render = () => {
       // Implementa la obtención de datos y renderización
       return hyperscript('html', /* tu estructura HTML aquí */);
   }
   module.exports = render;
   

2. Archivo index.js:

   • Maneja la respuesta al cliente, dividiendo y ensamblando el contenido HTML:

   const fs = require('fs');
   const render = require('./render');
   
   const contenidoHTML = async () => {
       const preContent = /* Lee y divide el HTML base */;
       const postContent = /* Define el contenido posterior */;
       const contenidoRenderizado = await render();
       return `${preContent}${contenidoRenderizado}${postContent}`;
   }
   // Responde al navegador
   

Comparación de rendimiento: Lighthouse antes y después de SSR

Es importante evaluar el rendimiento usando herramientas como Lighthouse para determinar las mejoras. Antes de aplicar los cambios, tomamos un punto de medida inicial y luego volvemos a aplicar los cambios para ver la diferencia.

1. Antes de SSR:

   • El contenido se genera en el lado del cliente.
   • Utiliza npm run build y npm run start para implementar y verificar la eficiencia en el navegador.

2. Después de SSR:

   • Verifica los cambios y observa cómo ahora el HTML incluye elementos que antes eran generados por el cliente.

Ventajas y consideraciones del SSR

Implementar SSR implica mover la carga de conexión a la API del cliente al servidor. Algunas consideraciones son:

• Tiempo de conexión: La conexión a la API es la misma, pero ahora el servidor lo gestiona, ahorrando tiempo al cliente.
• Alojamiento y latencia: Si la API y el servidor están juntos, el tiempo ahorrado es mayor en comparación con conexiones desde un navegador.

Al final, el uso de SSR mejora notablemente el tiempo de carga y reduce la cantidad de JavaScript necesario en el cliente, mejorando el rendimiento y la experiencia del usuario. Continúa explorando y optimizando para encontrar el balance perfecto para tus proyectos.