Next
Next

What are Cache Components in Next.js 16?

November 28, 2025

Cache Components in Next.js 16 provide explicit caching via the "use cache" directive or use cache hook, enabling Partial Prerendering (PPR) to statically prerender cacheable sections for instant navigation while streaming dynamic parts through Suspense boundaries. They unify server/client caching with automatic keying and integrate revalidation tags for control.

Example:

Code

// app/dashboard/page.tsx (with next.config.ts: { cacheComponents: true })
"use cache";

async function UserStats({ userId }: { userId: string }) {
  const stats = await fetch(`https://api.example.com/stats/${userId}`, {
    next: { tags: ['user-stats'] }
  }).then(res => res.json());
  return 
Views: {stats.views} | Sales: {stats.sales}
; } export default async function Dashboard({ params }: { params: Promise<{ userId: string }> }) { const { userId } = await params; return ( <> <h1>Dashboard</h1> <Suspense fallback={<div>Loading stats...</div>}> <UserStats userId={userId} /> </Suspense> </> ); }
Hire Now!

Need Help with Next Development ?

Ready to leverage the power of conversational AI? Start your project with Zignuts expert AI developers.
bg-image
download-image
Company Deck
PDF, 3MB
© 2026 Zignuts Technolab. All Rights Reserved.
branch imagesbranch imagesbranch imagesbranch imagesbranch imagesbranch images