cache-components

To cache Next.js server components, you wrap data fetchers with the 'use cache' directive and attach cacheTag and cacheLife to enable Partial Prerendering. This automates caching by co-locating caching primitives directly with your components.

Partial Prerendering is a mechanism that enables hybrid static and dynamic rendering. You orchestrate dynamic versus static content using Suspense boundaries and subshells, allowing scalable server-side generation and dynamic streaming within cached components.

You configure cache lifetimes using the cacheLife() function. To invalidate cached data in Next.js server components, you use the updateTag(), revalidateTag(), and revalidatePath functions to manage the caching lifecycle across static and dynamic use cases.

Using the 'use cache' directive requires async functions, serializable arguments, and proper runtime data handling. You must enable Cache Components in your next.config.ts file before wrapping your data fetchers and attaching caching primitives.

Next.js server component caching fails when functions are not async, arguments are non-serializable, or runtime data is handled improperly. Debugging workflows and correct invalidation strategies using revalidateTag and revalidatePath are required to resolve these issues.