Next.js y los Bugs de Caché: Cómo Superarlos sin Perder la Cabeza

Tu aplicación en Next.js muestra datos obsoletos porque el caché del lado del cliente no se actualiza como debería.

El truco

// ANTES: Problemas de caché
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    // Todo se almacena en caché durante 24 horas
    revalidate: 86400,
  };
}

// DESPUÉS: Manejo efectivo del caché
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    // Reducimos el tiempo de revalidación a 1 hora
    revalidate: 3600,
  };
}

Al emplear getStaticProps, Next.js genera páginas estáticas que se almacenan en caché. El truco está en ajustar el valor de revalidate en función de la frecuencia con la que los datos cambian. Reducir el tiempo de revalidación mantiene los datos más frescos sin recargar innecesariamente el servidor. En el ejemplo, cambiamos el tiempo de revalidación de 24 horas a 1 hora, lo que mejora la actualización de los datos sin comprometer la eficiencia.

Las actualizaciones de caché bien gestionadas son clave para vivir tranquilo.