next-cache-components

Overview

What is next-cache-components?

next-cache-components is a skill for Next.js 16+ that enables advanced caching strategies for React components. By activating Cache Components, developers can mix static, cached, and dynamic content within a single route, improving performance and flexibility in frontend applications. This skill is ideal for teams building scalable web apps with Next.js who want granular control over rendering and data freshness.

Who should use next-cache-components?

This skill is designed for frontend developers working with Next.js 16 or later. It's especially useful for those deploying on Vercel or similar platforms, and for projects where optimizing rendering speed and controlling cache lifetimes are critical. If your app needs to balance static content, cached data, and real-time updates, next-cache-components provides a practical solution.

Problems solved by next-cache-components

• Enables Partial Prerendering (PPR) for mixed content routes
• Allows caching of async data with custom lifetimes and tags
• Simplifies management of static, cached, and dynamic components
• Improves frontend performance and user experience

How to Use

Installation Steps

• Install the skill using the command:
  npx skills add https://github.com/vercel-labs/next-skills --skill next-cache-components
• Review the SKILL.md file for a concise summary and practical examples.
• Explore additional files like README.md, AGENTS.md, and metadata.json for deeper context.

Enabling Cache Components

• In your next.config.ts, set:

  import type { NextConfig } from 'next'
  
  const nextConfig: NextConfig = {
    cacheComponents: true,
  }
  
  export default nextConfig
  

• This replaces the previous experimental.ppr flag and activates Cache Components for your project.

Content Types Supported

Static (Auto-Prerendered)

• Use synchronous code and pure computations for content rendered at build time.
• Example:

  export default function Page() {
    return (
      <header>
        <h1>Our Blog</h1>
        <nav>...</nav>
      </header>
    )
  }
  

Cached (use cache directive)

• For async data that doesn't need to be fetched on every request, use the use cache directive and set cache lifetimes with cacheLife.
• Example:

  async function BlogPosts() {
    'use cache'
    cacheLife('hours')
  
    const posts = await db.posts.findMany()
    return <PostList posts={posts} />
  }
  

Dynamic (Suspense)

• For data that must be fresh, wrap components in React's Suspense.
• Example:

  import { Suspense } from 'react'
  
  export default function Page() {
    return (
      <>
        <BlogPosts />  {/* Cached */}
        <Suspense fallback={<p>Loading...</p>}>
          <UserPreferences />  {/* Dynamic */}
        </Suspense>
      </>
    )
  }
  

Adapting to Your Project

• Use the skill as a reference and adapt its workflow to your repository and tools. Avoid copying verbatim; instead, integrate caching strategies that fit your app's needs.

FAQ

Where can I find practical examples?

Check the SKILL.md file for clear code samples and explanations. The Files tab provides access to the full file tree, including references and helper scripts.

Is next-cache-components compatible with older Next.js versions?

No, this skill is designed for Next.js 16 and above. For earlier versions, consider alternative caching strategies.

How do I control cache lifetime and tags?

Use the cacheLife and cacheTag directives within your component functions to set custom cache durations and tags. Refer to the examples in SKILL.md for syntax.

When should I use Suspense for dynamic content?

Use Suspense when you need runtime data that must be fresh for every request, such as user preferences or session-based information.

Is next-cache-components a good fit for my project?

If your app requires a mix of static, cached, and dynamic content in a single route and you're using Next.js 16+, this skill is a strong fit. For purely static sites or apps without async data needs, simpler rendering strategies may suffice.