Introduction

Caching stores copies of frequently requested data in a temporary storage spot called the "cache." When a request comes in, the system checks the cache first. If it finds what it's looking for (a "cache hit"), the data is delivered instantly. If not (a "cache miss"), the system retrieves the data from the original source, stores it in the cache, and hands it over to the user. This process ensures faster response times and reduced load on the original data source.

Before Next.js 15, caching often felt complex and confusing, with settings like Force-dynamic and Cache-Control: no-store adding to the challenge. Fortunately, Next.js 15 introduces the cache function, simplifying caching and making it more accessible and efficient.

Basics of Caching in Nextjs 15

Next.js 15 introduces the cache function, which significantly simplifies cache management. The cache function allows us to wrap any function, and Next.js will automatically cache the result of that function based on its input arguments. This provides much finer-grained control over what gets cached and what doesn't.

But first, We'll need to upgrade to the canary version of Next.js and enable the dynamicIO API in next.config.ts file:

Loading...

Example

Let’s create a simple component that displays a user’s name and email address. We’ll use Faker.js to simulate fetching this data from a backend.

Loading...

The Page Component

Loading...

When we refresh the page, the data reloads every time which is great for a dynamic component but it's terrible for caching. See below:

Adding use cache

By adding "use cache" to the top of the file or specific components, we can cache the data so refreshing the page doesn’t reload it.

Caching Specific Routes or Components

Sometimes we don’t want to cache everything but just the some bits. Luckily, use cache gives us plenty of flexibility .

For exmaple we can cache individual components by adding "use cache" within those components

Loading...

or even better we can cache indiviual server action and fucntions

Let’s say a user’s name is dynamic (like their social media updates), but their email address rarely changes. We can cache only the email and keep the name dynamic. Here’s how:

Loading...

and we wrap the dynamic component in Suspense so the rest of the page renders immediately while the name is loading:

Loading...

Output :

When does cache expires

By default, the cache is set infinite and revalidates every 15 minutes.

But I impatient? So for that we can use a new function called cacheLife which is imported from next which we can usen fucntion to change the cache time .The value for the cachelIfe are given in below table .

And if thats not satisfactory , We can define custom cache expiration time .

Loading...

Conclusion

Caching in Next.js 15 offers unparalleled control over app’s performance. With the cache function, we can easily manage what’s cached, how long it’s stored, and where it resides. Whether building a dashboard or optimizing for speed, this feature provides powerful tools to enhance the application.

Note: The use cache is still an experimental feature.