Implementación de Server Side Rendering en NodeJS

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0019:41

Implementación de Server Side Rendering en NodeJS

Curso de Optimización Web

Clase 29 de 38

Clase 29 / 38

Recursos

¿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:

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

git checkout -b home_advares_optimización_SR cinco_with_SR

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:

Reestructuración de carpetas:
- Mueve la lógica de renderización desde source/carruselItems a una nueva carpeta llamada SSR/carruselItems.
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

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;

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.

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.
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.

Kenneth Angulo L

Hace un mes

¿Cómo divido el HTML en NodeJS?

Para inyectar contenido dinámico desde el servidor, una técnica muy práctica es usar un marcador de posición o placeholder dentro de tu archivo estático index.html. Imagina que tu HTML es un sándwich; necesitas abrirlo por la mitad para meter el relleno.

Puedes colocar un elemento vacío con un identificador único, por ejemplo, <div id="ssr-placeholder"></div>. Luego, utilizando el sistema de archivos de NodeJS (fs.readFileSync), lees todo el documento como una cadena de texto y aplicas el método .split() usando ese ID exacto como punto de corte.

Esto te devolverá un arreglo con dos partes: el pre-contenido (todo el <head> y el inicio del <body>) y el post-contenido (el cierre del <body> y los scripts). Finalmente, solo tienes que concatenar: pre-contenido + tu_html_generado_en_el_servidor + post-contenido. Es una solución creativa y directa que evita la necesidad de motores de plantillas complejos si tu proyecto es pequeño.

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Implementación de Server Side Rendering en NodeJS