Optimización de Sitios Web con Static Site Generation

¿Qué es el server-side rendering y cómo afecta el rendimiento web?

El Server-Side Rendering (SSR) es un proceso en el que el servidor genera todas las páginas web para cada solicitud del usuario. Cada vez que un usuario se conecta, el servidor procesa la solicitud y obtiene la información de una API. Esto significa que por cada nueva conexión, se realiza un llamado a las API que estamos utilizando. Si dos usuarios se conectan, se hacen dos solicitudes; si son cien conexiones, se realizan cien solicitudes. Este modelo plantea un desafío potencial de escalabilidad y eficiencia en proyectos donde la información no cambia tan frecuentemente, como una lista de animes más populares.

¿Cuándo utilizar static site generation?

El Static Site Generation (SSG) se presenta como una alternativa eficiente al SSR cuando la información de un sitio no cambia frecuentemente. En lugar de regenerar las páginas con cada solicitud, el SSG procesa todo una sola vez durante la etapa de construcción del proyecto, almacenando el contenido en el servidor para luego distribuir la misma respuesta a todas las conexiones. Esto reduce la carga del servidor y las solicitudes a la API.

¿Cómo implementar static site generation en tu proyecto?

Pasar de SSR a SSG en un proyecto implica ciertos cambios clave en la estructura y el flujo del proceso. A continuación, algunos pasos básicos para implementar SSG:

1. Identificar el contenido estático: Determina qué partes de tu sitio no requieren ser actualizadas constantemente.
2. Generar el contenido durante la construcción: Utiliza herramientas para obtener el contenido API durante la build del proyecto y almacénalo estáticamente.
3. Configurar el servidor para contenidos estáticos: Modifica el servidor para que sirva la versión pre-renderizada del HTML, CSS y JavaScript.

Refinando el SSG con herramientas y librerías

En el ejemplo del curso, se hace uso de la librería HyperScript para ayudar en la generación del HTML estático. Además, el script export.js facilita la creación del archivo index.html con todos los componentes renderizados. El uso de JavaScript junto con las APIs nos permite estructurar nuestro sitio bajo el popular enfoque JAMStack, que privilegia los rendimientos y la escala.

// Ejemplo básico de cómo usar JavaScript para generar HTML estático
// Se reutiliza la función render previamente utilizada en SSR

const render = require('./render');

const createStaticSite = () => {
  const htmlContent = render();  // Obtener el contenido completo con render
  saveToFile('index.html', htmlContent);  // Guardar el HTML generado en un archivo
};

const saveToFile = (filename, content) => {
  // Función para escribir el contenido en un archivo
  fs.writeFileSync(filename, content);
};

createStaticSite();  // Ejecutar la creación del sitio estático

Beneficios del static site generation

El SSG trae consigo numerosos beneficios, especialmente en términos de rendimiento:

• Eficiencia en cargas: Las páginas estáticas cargan más rápido ya que no dependen de cálculos dinámicos con cada solicitud del usuario.
• Apoyo de servidores universales: Los sitios generados estáticamente pueden subirse a cualquier servidor convencional, ya que solo necesitan soportar HTML, CSS y JavaScript.
• Seguridad mejorada: Menos solicitudes al servidor significa menos exposición a vulnerabilidades directas o ataques potenciales.

Estos beneficios facilitan que los desarrolladores creen sitios altamente optimizados, aunque no todas las aplicaciones son adecuadas para el SSG. Entornos como dashboards de datos en tiempo real o analíticas dependen de información dinámica actualizada constantemente y no son candidatos ideales para prerenderización.

Desafíos finales y consideración de optimización

Aunque el static site generation puede llevar una página al máximo nivel de optimización, siempre debe evaluarse la naturaleza y las necesidades del proyecto. Los desarrolladores deben analizar qué partes del sitio pueden beneficiarse de esta metodología y cuáles requieren permanecer dinámicas. Además, en futuras clases, se estudiarán aspectos como la implementación de cachés y redes de entrega de contenido (CDN) para mejorar aún más la eficiencia y rendimiento del sitio.