Home
NextJS
Next.js: Caching
December 12, 2025
1 min

Table Of Contents

01
What Is Caching?
02
A New Caching Model
03
Using use cache
04
Controlling Lifetime: cacheLife
05
Managing Groups: cacheTag
06
Caching + Partial Prerendering (PPR)
07
A New Way of Thinking

Caching isn’t new — but in Next.js 16, it’s been completely redesigned. Instead of choosing between SSR, SSG, ISR, or PPR, you now control performance by defining what should be cached, and Next.js automatically handles how it’s served.

What Is Caching?

Caching simply means temporarily storing data so it can be reused instead of fetched or rebuilt again.

Next.js uses multiple cache layers to make your app feel instant:

  • Browser Cache – Stores static assets locally.
  • Server Cache – Stores pre-rendered pages and API responses.
  • Data Cache – Saves fetched data to avoid unnecessary requests.

Together, these layers ensure your app loads fast and feels responsive.


A New Caching Model

In Next.js 16, traditional modes like SSR, SSG, ISR, and PPR still exist — but now as emergent behaviors, not explicit modes.

You don’t choose a rendering strategy anymore. You define cache boundaries, and the framework decides the optimal rendering path.

To enable the new system, you must add a flag in your next.config.js (caching is disabled by default).


Using use cache

Just like use client or use server, you can now mark pages, components, or even functions with:

"use cache";

This tells Next.js to store and reuse the result as long as inputs haven’t changed.

You can apply caching at:

  • File level
  • Component level
  • Function level

Example: Adding use cache at the top of a page pre-renders it at build time and revalidates it automatically every 15 minutes.


Controlling Lifetime: cacheLife

If you want fine-grained control, use the cacheLife() method:

"use cache";
import { cacheLife } from "next";
cacheLife("1h");

This keeps your cached data alive for one hour.

You can also configure custom lifetimes in next.config.js.


Managing Groups: cacheTag

If cacheLife controls when cached data expires, cacheTag controls what should be invalidated together.

This makes it easy to clear related items in a single action.

To refresh data instantly, use:

  • revalidate()
  • revalidateTag()

Caching + Partial Prerendering (PPR)

With the new cached components system, you no longer need to manually enable PPR.

  • Static sections (use cache) are pre-rendered automatically.
  • Dynamic sections stream in via React Suspense.

The result: faster loads with zero configuration.


A New Way of Thinking

Next.js 16 introduces a whole new caching mindset:

  • Same principles
  • Cleaner, more flexible syntax
  • Far more control

It takes a bit to adjust, but once you do, you get precision performance tuning with minimal effort.

And no… hopefully we won’t end up with use use or next next anytime soon.



Tags

#tailwindcss

Share

Related Posts

Crash Course
Next.js: Build Adapters API
December 13, 2025
2 min
© 2025, All Rights Reserved.
Powered By

Social Media

githublinkedinyoutube