Dos Formas de Pre-renderizado

Next.js ofrece dos formas de pre-renderizado: Generación Estática y Renderizado del Lado del Servidor (SSR). La diferencia radica en cuándo se genera el HTML para una página.

• Generación Estática es el método de pre-renderizado que genera el HTML en el momento de la construcción. El HTML pre-renderizado se reutiliza en cada solicitud.
• Renderizado del Lado del Servidor (SSR) es el método de pre-renderizado que genera el HTML en cada solicitud.

En modo de desarrollo (cuando ejecutas npm run dev o yarn dev), las páginas se pre-renderizan en cada solicitud. Esto también aplica a la Generación Estática para facilitar el desarrollo. Al pasar a producción, la Generación Estática ocurrirá una vez, durante la construcción, y no en cada solicitud.

Base por Página

Es importante destacar que Next.js te permite elegir qué forma de pre-renderizado usar para cada página. Puedes crear una aplicación Next.js "híbrida" utilizando Generación Estática para la mayoría de las páginas y Renderizado del Lado del Servidor (SSR)** para otras.

Cuándo Usar Generación Estática vs. Renderizado del Lado del Servidor (SSR)**

Recomendamos usar Generación Estática (con y sin datos) siempre que sea posible, porque tu página puede construirse una vez y servirse desde una CDN, lo que la hace mucho más rápida que tener un servidor renderizando la página en cada solicitud.

Puedes usar Generación Estática para muchos tipos de páginas, incluyendo:

• Páginas de marketing
• Publicaciones de blog
• Listados de productos de comercio electrónico
• Ayuda y documentación

Debes preguntarte: "¿Puedo pre-renderizar esta página antes de que un usuario la solicite?" Si la respuesta es sí, entonces deberías elegir Generación Estática.

Por otro lado, Generación Estática no es una buena idea si no puedes pre-renderizar una página antes de que un usuario la solicite. Tal vez tu página muestra datos que se actualizan frecuentemente, y el contenido cambia en cada solicitud.

En ese caso, puedes usar Renderizado del Lado del Servidor (SSR). Será más lento, pero la página pre-renderizada siempre estará actualizada. O puedes omitir el pre-renderizado y usar JavaScript del lado del cliente para poblar datos que se actualizan frecuentemente.

Nos Enfocaremos en Generación Estática

En esta lección, nos enfocaremos en Generación Estática. En la siguiente página, hablaremos sobre Generación Estática con y sin datos.