Next.js: Multiplica la Velocidad de tu Sitio con Incremental Static Regeneration

Tu sitio en Next.js está lento porque las páginas estáticas no se actualizan hasta el siguiente despliegue.

El truco

// ANTES: Static Generation sin ISR
export async function getStaticProps() {
  const data = await fetchDataFromAPI();
  return {
    props: { data },
  };
}

// DESPUÉS: Implementando ISR
export async function getStaticProps() {
  const data = await fetchDataFromAPI();
  return {
    props: { data },
    revalidate: 60, // Regenera la página cada 60 segundos
  };
}

Con Incremental Static Regeneration (ISR), Next.js permite regenerar páginas estáticas en el servidor después de un tiempo determinado sin necesidad de un nuevo despliegue. Añadiendo la clave revalidate a getStaticProps, defines el intervalo en segundos para que Next.js revalide la página en segundo plano. Esto significa que los usuarios siempre verán la página más actualizada posible con muy poco impacto en la carga del servidor.

ISR es el arma secreta para ofrecer contenido fresco en sitios estáticos sin comprometer el rendimiento y la velocidad.