Next.js Caching: Turbocharging Your App with Efficient Data Fetching

Caching in Next.js isn’t just about saving time—it’s about reducing redundant network requests, keeping data fresh, and making your app perform like a rockstar.
Whether you’re trying to keep data cached for longer or refresh it on-demand, Next.js gives you all the tools you need. In this article, we will break down how to use caching effectively in Next.js

Next.js extends the fetch API to give you superpowers when it comes to caching. With simple fetch options like cache: 'no-store' and cache: 'force-cache', you can easily control when and how data is cached.

Always Fresh with cache: 'no-store' (Equivalent to unstable_noStore())

Want fresh data every time? cache: 'no-store' is the one to go with. This fetch option skips the cache entirely and grabs the latest data with every request. It’s perfect when you need real-time accuracy—no leftovers from yesterday's fetch allowed.

Note: You can also use unstable_noStore() if you want to skip the cache on a server component. The syntax may change later, so stick with cache: 'no-store' for stability.

Reuse Data with cache: 'force-cache' (Equivalent to unstable_cache())

On the other hand, if you’re okay with using cached data (think static content that doesn’t change often), go with cache: 'force-cache'. It’ll save the response for future use and skip redundant network requests.

Note: unstable_cache() also caches data, but using the stable cache: 'force-cache' is more reliable if you’re avoiding surprises down the road.

Keep It Fresh with Revalidations

Sometimes cached data needs a refresh—whether it's after a certain time or when triggered by an event. Lucky for you, Next.js lets you revalidate your cached data in several ways.

Revalidate with Time: next.revalidate

If your data needs to refresh periodically (like every hour or day), you can set a revalidation period using the next.revalidate option in your fetch request. It’ll grab the latest data after the time you specify while keeping things cached the rest of the time.

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

On-Demand Revalidation with Tags: revalidateTag()

Now, Imagine you can tell Next.js to refresh specific bits of cached data when something important happens—like a form submission or a new blog post going live. You can assign tags to your cached data, and then revalidate those tags whenever needed.

This way, you can manually refresh parts of your cache on demand without waiting for the next scheduled revalidation.

Using the Unstable Methods

If you’re the adventurous type, you can also use the unstable_noStore() and unstable_cache() methods directly on server components to manage caching behavior. Just keep in mind, that these are "unstable" for a reason, so they might change in the future( or might have been changed at the time you are reading it).

Or if you’re into caching, here’s how you can use unstable_cache():

Skip the Prop Drilling

Here’s a neat trick: if you’re fetching the same data across multiple components (like a Layout, Page, and some inner components), don’t stress about fetching it once at the top and passing it down or having to make a request for that data multiple times on multiple components that cause slowing down the performance. Next.js automatically memoizes fetch requests during server rendering, meaning if you fetch the same data multiple times, it’s smart enough to only hit the network once and share the result in multiple components.

Wrapping It Up

Next.js gives you all the tools you need to manage caching effectively, whether through fetch API options like cache: 'no-store' and cache: 'force-cache', or the more experimental unstable_noStore() and unstable_cache() methods. Add in revalidation strategies like next.revalidate and revalidateTag, and you’ve got everything you need to keep your data fresh without breaking a sweat.

Sources:
Next.js caching

The above is the detailed content of Next.js Caching: Turbocharging Your App with Efficient Data Fetching. For more information, please follow other related articles on the PHP Chinese website!