⚙️ Caching, ISR y revalidación de datos

⚙️ Caching, ISR y revalidación de datos en Next.js

Aprende cómo mejorar el rendimiento de tus aplicaciones Next.js mediante caching, Incremental Static Regeneration (ISR) y revalidación de datos.

---

🗄️ Cache en Next.js

Next.js aprovecha el renderizado estático (SSG) y el renderizado del lado del servidor (SSR) para optimizar el rendimiento. Los datos y páginas se pueden almacenar en caché para reducir tiempos de carga y solicitudes al servidor.

Por ejemplo, con SSR puedes usar getServerSideProps y cachear los resultados en un CDN o proxy:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    // Podemos usar encabezados de cache en SSR
  };
}
      

⏱️ Incremental Static Regeneration (ISR)

ISR permite generar páginas estáticas y revalidarlas después de un tiempo definido sin necesidad de reconstruir toda la app. Esto combina lo mejor de SSG y SSR: rendimiento de páginas estáticas con contenido actualizado automáticamente.

Ejemplo con revalidate en getStaticProps:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60, // Revalida cada 60 segundos
  };
}
      

Con esto, Next.js sirve la página estática y actualiza automáticamente el contenido en segundo plano cada minuto.

🔄 Revalidación de datos bajo demanda

Además de la revalidación periódica, Next.js permite revalidar páginas bajo demanda mediante el endpoint /api/revalidate.

Ejemplo:

// pages/api/revalidate.js
export default async function handler(req, res) {
  try {
    await res.revalidate('/posts'); // Ruta a revalidar
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('Error al revalidar');
  }
}
      

Esto es útil cuando actualizas contenido dinámico desde un CMS y quieres que la página estática se actualice inmediatamente sin esperar el revalidate por tiempo.

---

💡 Consejo: Combinar SSG con ISR y revalidación bajo demanda te permite tener páginas rápidas, SEO-friendly y siempre actualizadas.

← Volver al índice