next-cache-components

Partial prerendering in Next.js is enabled by setting cacheComponents: true in next.config.ts. This allows routes to mix static, cached, and dynamic content, optimizing rendering for pages with varying data refresh cycles.

The cacheComponents feature is used for partial prerendering to balance fast initial loads with fresh dynamic data. It provides a structured way to cache page components, improving web performance without sacrificing up-to-date information.

You can cache specific page components by annotating them with the use cache directive. This enables caching with customizable policies using cacheLife, cacheTag, and updateTag directives to control data refresh cycles.

Yes, the cacheComponents feature requires Next.js 16 or higher. You must enable it within next.config.ts and use supported cache directives to manage static, cached, and dynamic content rendering.

Use cache components for web performance optimization on routes like dashboards, product catalogs, and profile pages. It is ideal when static shells combine with periodically refreshed data to balance load speed and dynamic content.