Static Generation

Sitios estáticos y Jamstack

Modos de Rendering

Trade-offs de SSG

Incremental Static Generation

Incremental Static Site Generation

Trade-offs ISSG

Otras alternativas

• pdf
• content

Introduccion: rendering modes de Next.js

Sitios estaticos y Jamstack

Ideas/conceptos claves

Jamstack es una arquitectura diseñada para hacer que la web sea más rápida, más segura y más fácil de escalar. Se basa en muchas de las herramientas y flujos de trabajo que adoran los desarrolladores y que brindan la máxima productividad.

Los principios básicos de pre-rendering y el Decoupling permiten que los sitios y las aplicaciones se entreguen con mayor confianza y resistencia que nunca.

Pre-rendering Generar el marcado que representa una vista antes de cuando se requiera. Esto ocurre durante una compilación en lugar de bajo demanda, por lo que los servidores web no necesitan realizar esta actividad para cada solicitud recibida.

Decoupling es el proceso de crear una separación limpia entre sistemas o servicios. Al desacoplar los servicios necesarios para operar un sitio, cada componente puede ser más fácil de razonar, puede intercambiarse o actualizarse de forma independiente y puede designarse como el ámbito de especialistas dedicados, ya sea dentro de una organización o como un tercero.

Apuntes

• Jamstack ⇒ es una arquitectura que consta principalmente y como actor principal al navegador.
  • La aplicación en sí consta de CDN y microservicios.
  • Pero para esta arquitectura no se necesita un servidor para conectarnos a las fuentes de información a comparación de un website tradicional.

En general, solo hay dos formas de renderizar una página web: en el navegador (cliente) o en el servidor.

• Next.js nos provee diferentes modos de rendering para poder realizar nuestros productos digitales.

Arquitectura Jamstack

1. Datos
   • Internet
   • Base de datos
   • Archivos locales
2. Generador estatico
   • Encargado de tomar los datos para crear HTML y CSS.
3. HTML/CSS

<aside> 📌 RESUMEN:

Jamstack es una arquitectura la cual entre sus principales características esta que el contenido se pre-renderiza lo cual hace que no sea necesario tener un servidor en sí para conectarnos a fuentes de información a diferencia de una aplicación web tradicional.

</aside>

Modos de rendering en Next.js

Ideas/conceptos claves

Rendering: Procesar pedazos de código (JS) y datos para mostrar su resultado (HTML).

Apuntes

• Existen 3 formas de realizar un proceso de rendering
  • Client-side
  • Server-side
  • Static rendering

<aside> 📌 RESUMEN:

Existen 3 formas de poder hacer un proceso de rendering, client side la cual el navegador del cliente se encargará de transformar el JS a HTML, server side que significa que un servidor se encargara de la transformación baja demando o Static rendering, en la cual el proceso de renderizado se realiza una única vez al momento de compilar la aplicación.

</aside>