Next.js— Renderizado híbrido (CRS, SSR, SSG)

Introducción

• Renderizado híbrido
• CSR (Client-Side Rendering)
• SSR (Server-Side Rendering)
• SSG (Static Site Generation)

Lee el artículo gratis → friends link o en Github

Todos los ejemplos los podrás encontrar en el repositorio next.js-15.3–1[ref]
Acá puedes ver todas las stories de next.js [ref]

Renderizado híbrido

Una de las principales características de Next.js es su renderizado híbrido, lo que significa que puedes elegir cómo se renderiza cada página en función del caso de uso:

• Del lado del cliente — CSR (Client Side Rendering).
• Del servidor — SSR (Server Side Rendering).
• De forma estática — SSG (Static Site Generation).

Nota: Para los ejemplos vamos a utilizar la API JSON Placeholder[ref] para simular la carga de publicaciones.

:: CSR (Client Side Rendering)

El enfoque es el siguiente

• El navegador solicita la página y recibe un HTML vacío.
• El navegador descarga el Javascript necesario.