next-cache-components

Next.js Cache Components enable Partial Prerendering (PPR) to mix static, cached, and dynamic content within a single route. You use the 'use cache' directive with Suspense to render a static shell immediately while loading dynamic data as needed.

The 'use cache' directive in Next.js controls caching at the function, component, or page level. Use it to manage rendering workflows for scenarios like dashboards or pages with mixed data sources, optimizing performance by caching specific content blocks.

You control cache lifetimes and invalidation in Next.js Cache Components by applying cacheLife, cacheTag, and updateTag. These properties manage how long cached content persists and when it should be invalidated or updated.

Next.js Cache Components support runtime data constraints, but you must respect limitations when using cookies or headers inside cached code. Ensure your Next.js config enables cacheComponents to properly handle these dynamic runtime requirements.

To enable Cache Components for Partial Prerendering, configure your next.config.ts file to switch on the cacheComponents setting. This allows you to implement routes with static shells, cached content, and dynamic data using appropriate cacheLife and cacheTag.

Using Next.js Cache Components is an effective approach for dashboards with mixed data sources. Apply PPR to render a static shell immediately, then use cacheLife and cacheTag to manage cached or dynamic data loading as needed for optimal performance.