Next.js introdujo una nueva forma de renderizar components y, con ello, una nueva forma de cachearlos. A estas features Next.js les llama "Cache Components" y "Partial Prerendering" sobre esto hablaré en este artículo. Ponete cómodo.

Habilitar cache components

Lo primero que tenés que hacer para poder usar cache components es habilitarlo y para ello hay que ir al file de config de Next.js y debemos agregar una propiedad cacheComponents en true.

const nextConfig: NextConfig = {
  cacheComponents: true,
  // ...Others configs...
};

Una vez agregada esa propiedad se habilitan los cache components y al mismo tiempo se habilita PPR (Partial Prerendering).

A tener en cuenta es si estás usando Route Segment Config en tu proyecto esto te va a dar error. Ya que cache components viene a cambiar como se configura eso.

Que vamos a armar?

Vamos a armar una especie de app de libros, que va a tener las siguientes secciones:

• Header
• Presentation
• Daily Best Seller
• All Books
• Footer

El código del proyecto ya terminado -> https://github.com/Braifz/cache-components-next-16

La idea es armar algo así:

Partial Prerendering

Entra a la cancha este jugador, Partial Prerendering (PPR) permitiendo hacer páginas de Next.js estáticas con huecos para agregar componentes dinámicos dentro de ellas.

Dentro del ejemplo que pusimos, nosotros queremos armar una página estática pero con una sección dinámica en el medio.

Donde los componentes DailyBestSeller y AllBooks hacen request yendo a buscar data externa por ende son dinámicos.

Quedaría algo así:

Al hacer eso Next.js no va a dar el siguiente error:

Podemos hacer dos cosas para solucionarlo:

• Usamos "use cache" para que el componente dinámico se cacheé y se vuelva "static" ya que Next.js no va a tener que hacer la request en runtime a menos que revalidate se cumpla.

• Ponemos nuestro componente dentro de un Suspense Boundary y de esa manera le decimos a Next.js que este componente es dinámico y que haga la petición en cada request, ya que queremos la data más actualizada posible y que cuando la petición se complete muestre el contenido mientras tanto mostrame un loading.

En caso del component DailyBestSeller vamos a cachearlo ya que esa información solo debería cambiar una vez al día (el libro más vendido el día anterior) y con AllBooks vamos a dejarlo dinámico para mostrar siempre la data fresca.

Algo como esto:

Bueno, y el código quedaría algo así:

// Page with Partial Prerendering
export default async function Home() {
	return (
		<div>
          {/* Static content - Using Static Shell and is pre-rendered */}
          <Presentation />

          {/* Cached content - Cached for the lifetime inside the component */}
          <BestSellerSection />

          {/* Dynamic content - Revalidated on every request */}
          <Suspense fallback={<Spinner />}>
              <AllBooks />
          </Suspense>
        </div>
    );
}

"use cache"

Dentro del componente BestSellerSection vamos a usar "use cache" para que el componente se cacheé y se vuelva "static" ya que Next.js no va a tener que hacer la request en runtime a menos que revalidate se cumpla.

a nivel código queda así:

const BestSellerSection = async () => {
  // This component is cached
  "use cache";

  cacheLife("days"); // Cache for 1 day

  const bestSeller = await getBestSeller();

  return (
    <div>
      {/* all the content */}
    </div>
  );
}

Errores comunes

• Usar "use cache" en un componente que no es async.
• Usar Route Segment Config en lugar de "use cache" y cacheLife().
• Acceder a cookies() o headers() dentro de un componente que usa "use cache".

Conclusion

En este artículo vimos como activar cache components y como funciona PPR (Partial Prerendering). También vimos cómo usar "use cache" para cachear componentes en Next.js y cómo usar Suspense para hacer componentes dinámicos.

Cosas que no hable y que tal vez en otro artículo escriba sobre ello:

• Cómo usar "cache tags" para invalidar cache de forma manual y revalidar componentes
• Cómo usar "cache headers" para controlar el cache de forma más granular

Recursos

• Next.js Cache Components