Configuración de Incremental Static Generation en Next.js

¿Qué es el Incremental Static Generation en Next.js?

Next.js se ha convertido en uno de los frameworks más populares de React gracias a su capacidad de innovación constante y a las funciones avanzadas que ofrece, como el Incremental Static Generation (ISG). Esta técnica permite mejorar notablemente el rendimiento de las aplicaciones al generar de manera incremental las páginas estáticas. Así, no solo se beneficia la velocidad de carga, sino también la experiencia del usuario final, haciendo este proceso mucho más sencillo en comparación con otros frameworks.

¿Cómo habilitar el Incremental Static Generation?

Es importante entender que el ISG no solo es una mejora técnica, sino que puede implementarse de manera simple. Para habilitarlo, necesitas ajustar las propiedades de tu componente en el método getStaticProps, donde se debe utilizar la propiedad revalidate para determinar cada cuánto deseas refrescar una página. Por ejemplo, un valor de 5 * 60 hará que la página se actualice cada cinco minutos. Esta configuración es aplicable a ambas, la página principal y las demás páginas de su sitio.

export async function getStaticProps() {
  // Otra lógica...
  return {
    props: {
      // Propiedades...
    },
    revalidate: 5 * 60, // Reactualiza cada 5 minutos
  };
}

¿Qué sucede detrás de escena en Next.js?

Cuando compilas el proyecto para producción, utilizando comandos como yarn build, Next.js genera un resumen donde indica que las páginas están usando ISG o SSG (Static Site Generation). La salida en el directorio .next te muestra los archivos HTML y JSON que Next.js ha prerenderizado, concuerdan con el número de páginas que has instruido crear en getStaticPaths.

Ejecución en producción

Al iniciar el servidor en modo producción con yarn start, observarás que las páginas cargan más rápido. Al interactuar con la página, sigue funcionando eficientemente, lo cual es un claro indicativo de que el ISG está optimizando la entrega de contenido.

¿Qué ocurre con las páginas nuevas?

Un aspecto fascinante del ISG es su capacidad para manejar de manera elegante las solicitudes de páginas que no han sido prerenderizadas. Por ejemplo, si se visita una página que no está dentro de las prerenderizadas, Next.js la genera automáticamente en segundo plano y la guarda, además de mostrarla al usuario. Así, al volver a revisar el directorio .next, la nueva página estará presente como HTML ya renderizado. Este proceso es otro ejemplo del poder del Incremental Static Generation, que nos permite manejar eficientemente un gran volumen de contenido.

Este marco ofrece la capacidad de ajustar la estrategia Fallback que define cómo manejar páginas que aún no han sido generadas, ya sea de una manera bloqueante o con diferentes valores que se explorarán en profundidad posteriormente. El revalidate es un parámetro clave en este proceso, ya que determina cada cuánto Next.js debe ir al servidor para refrescar las páginas y mantener el contenido actualizado.

Con estas herramientas, Next.js se asegura de proporcionar un rendimiento óptimo y una escalabilidad robusta, ideal para proyectos dinámicos y de gran escala. ¡Sigue explorando Next.js y aprovecha al máximo sus capacidades innovadoras!