Diferentes formas de Pre-renderizado en NextJS

Next Js es un framework full-stack basado en React que habilita funcionalidades como la renderización previa de páginas web. A diferencia de la aplicación de reacción tradicional donde toda la aplicación se carga en el cliente, Next Js permite que la página web se represente en el servidor, lo cual es excelente para el rendimiento y el SEO. Puede obtener más información sobre Next Js aquí .

Antes de entrar en los diferentes tipos de Pre-renderizado, primero definamos Pre-renderizado.

Pre-renderizado: Next Js pre-renderiza todas las páginas de forma predeterminada, lo que significa que Next Js generará HTML para cada página por adelantado en lugar de depender del javascript del lado del cliente para hacerlo todo. Entonces, en lugar de ver una pantalla en blanco y esperar a que se cargue javascript, el usuario verá el contenido HTML completo en la primera carga (pero sin interactividad hasta que se cargue javascript). El servidor es responsable de generar todo el contenido de una página web. El contenido de representación previa mejora el rendimiento y el SEO porque el rastreador de SEO ahora puede leer el contenido real rápidamente y clasificar su página web en consecuencia.

Pre-renderizado: 

Sin renderizado previo: 

Diferentes formas de renderizado previo en Next Js: Next Js proporciona tres técnicas diferentes de renderizado previo:

1. Generación de sitios estáticos (SSG): es el método que genera HTML en el momento de la compilación. El HTML renderizado previamente se usa en cada solicitud. Si tenemos una página HTML que no requiere ningún dato externo, Next Js renderizará previamente su contenido de forma predeterminada. (Ejemplo: Acerca de la página). Pero si nuestra página web requiere datos de alguna API externa, Next Js, como parte del proceso de generación estática, buscará y descargará los datos por adelantado y generará el HTML. Todo esto se hace durante el tiempo de construcción. Todo el contenido pregenerado se almacena en una CDN, de modo que cada vez que un usuario solicita ver la página web, se envía una versión en caché, lo que mejora el rendimiento.

Este método es adecuado para páginas con contenido estático, como página de información, página de contacto, etc.

2. Regeneración incremental del sitio: en la generación de sitios estáticos, no hay espacio para contenido dinámico. En este método, HTML se genera a intervalos regulares, lo que le permite crear o actualizar páginas estáticas después de haber creado el sitio. Combina el poder de la generación estática con la flexibilidad del contenido dinámico. Cada vez que se realiza una solicitud, la página se genera estáticamente con la inicialización de un intervalo específico (por ejemplo, 60 segundos). Después de ese intervalo, la página se vuelve a descargar o se vuelve a generar. Entonces, el primer usuario puede ver datos obsoletos, pero a partir de ese momento, todos los usuarios verán datos nuevos.

Este formulario es adecuado para páginas que tienen contenido dinámico pero que no cambia con tanta frecuencia como la página del producto para cualquier sitio web de comercio electrónico, ya que el precio de los productos podría cambiar.

3. Representación del lado del servidor: es el método de representación previa que genera una página HTML para cada solicitud, lo que lo hace más lento que los otros dos métodos porque no se almacena contenido en caché. Sin embargo, es apropiado para contenido dinámico que cambia con frecuencia.

Este método es adecuado para páginas como News Feed.

Ahora puede decidir qué formulario es apropiado para su página web según el caso de uso. Es una buena práctica verificar siempre si podemos generar estáticamente algún dato, ya que es mucho más rápido. La principal ventaja de la renderización previa es que los rastreadores de SEO pueden descubrir y clasificar rápidamente el contenido de la página. También mejora el rendimiento ya que la página se renderizará más rápido porque el contenido ya se ha renderizado.