Implementando ISR con Next.js

Next.js es uno de los frameworks más populares de la actualidad basado en React, y uno de los primeros en permitir implementar Server-Side Rendering o SSR de forma sencilla.

Este blog esta construido con Next.js y hasta hace poco, implementado con SSR. Sin embargo, de un tiempo para aca, ha resurgido la idea de desarrollar sitios estáticos, sirviendo HTML con soluciones de tipo Static-Site Generation o SSG para crear sitios más eficientes en cuanto a desempeño y tiempos de carga.

SSR vs SSG

La principal diferencia entre SSR y SSG esta en que el primero construye el HTML de la página en cada petición del usuario al servidor donde se aloje el sitio, mientras que el segundo construye el HTML una sola vez, generalmente al momento de publicar o liberar nuestro sitio, y es la versión que se entrega en todas las peticiones a nuestro sitio de ahí en adelante.

Esto hace que un sitio implementado con SSG sea muy rápido al momento de cargar comparado con el tiempo de espera que lleva con SSR compilar y entregar el HTML al cliente.

ISR, un híbrido entre SSR y SSG

Por su naturaleza SSG esta pensado para sitios donde los cambios son poco frecuentes, como es el caso de un blog. Sin embargo a pesar de sus ventajas, tener que hacer un build y deploy cada vez que quieras modificar el contenido de tú sitio, se puede convertir en un proceso tedioso.

Para resolver esto en Next.js, a partir de la versión 9.5, es posible implementar algo llamado ISR o Incremental Static Regeneration.

La idea es combinar lo mejor de SSR y SSG. Poniendo de ejemplo este blog, al momento de hacer build y deploy se generan todos los artículos en HTML utilizando getStaticProps y getStaticPaths, que son los métodos de Next.js para generar sitios estáticos.

¿Pero que pasa cuando nuestro sitio ya está en línea y queremos modificar el contenido, por ejemplo, publicar un artículo nuevo? ISR nos permite generar estos nuevos artículos en HTML la primera vez que se recibe una visita, permitiendo que en visitas subsecuentes se entregue la página de inmediato. La mismo función aplica cuando haces modificaciones a tu sitio.

Como implementar ISR con Next.js

Para hacer esto, no hace falta mas que un par de líneas en nuestro código.

export const getStaticProps = async ({ params }) => {
  const data = await getPostAndMorePosts(params.slug);
  return {
    props: {
      post: data?.post ?? null,
      ...
    },
    revalidate: 60
  };
};

En nuestra función de getStaticProps agregamos un el parámetro revalidate. Con este indicamos que la página deberá regenerarse, en este ejemplo, después de 60 segundos a partir de cuando se recibió la petición.

En términos prácticos, el visitante recibirá la página al instante mientras en el fondo esta se regenera de nuevo para entregar la última versión disponible en HTML al próximo usuario que visite nuestro sitio. Esto asegura que nuestra información nunca estará des-actualizada más de los 60 segundos que especificamos. Este parámetro es configurable y puedes capturar los segundos que consideres conveniente.

La otra pieza del rompecabezas es en la función de getStaticPaths que es la que se encarga de generar cada una de las posibles páginas de nuestro sitio.

export const getStaticPaths = async () => {
  const allPosts = await getAllPosts()
  return {
    paths: allPosts?.map(post => `/post/${post.fields.slug}`) ?? [],
    fallback: "blocking"
  }
}

El parámetro de fallback define que sucede cuando se recibe la petición de una página que no ha sido generada previamente como HTML. Sin este parámetro nuestros visitantes recibirán un error 404. Sin embargo, al fijarlo como blocking estamos indicando que debemos esperar a la generación del HTML como sucedería con SSR.

Al hacer esta configuración logramos implementar ISR y podemos actualizar nuestro sitio sin tener que hacer un deploy y con el rendimiento de un sitio HTML con respuesta casi al instante.

Conclusión

Si estas considerando un sitio que implemente SSG para mejorar los tiempos de respuesta, considera definitivamente utilizar ISR. Si tu sitio cuenta con cientos de páginas, por ejemplo un sitio e-commerce con cientos de artículos, generar una página para cada artículo puede no ser viable, y ISR se convertiría en una excelente opción.