What is Cache in Next.js Data Fetching Explained

In Next.js, cache in data fetching means storing fetched data temporarily to avoid repeated requests and speed up page loading. It helps Next.js reuse data between requests or renders, improving performance and reducing server load.

How It Works

Think of cache in Next.js data fetching like a fridge where you keep food you bought recently. Instead of going to the store every time you want to eat, you check the fridge first. Similarly, Next.js stores fetched data so it can reuse it quickly without fetching again.

When you fetch data in Next.js using functions like getStaticProps or getServerSideProps, Next.js can cache the results. This means if the same data is needed again soon, Next.js serves it from the cache instead of fetching it again from the database or API. This saves time and makes your app faster.

Cache can be automatic or controlled by you. For example, with Incremental Static Regeneration (ISR), Next.js caches static pages and updates them in the background after a set time, so users get fast responses with fresh data.

Example

This example shows how Next.js caches data using getStaticProps with revalidation to update cache every 10 seconds.

javascript

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: { data },
    revalidate: 10 // Cache this page for 10 seconds
  }
}

export default function Page({ data }) {
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

Output

{
  "id": 1,
  "name": "Sample Data"
}

When to Use

Use cache in Next.js data fetching when you want to speed up your app by avoiding repeated data requests. It is great for pages where data changes occasionally but not every second, like blog posts, product listings, or user profiles.

For example, if you have a blog, caching the posts means visitors get fast page loads. You can set a revalidation time to update the cache when new posts are added. For real-time data like chat apps, caching might be less useful because data changes constantly.

Key Points

• Cache stores fetched data temporarily to speed up loading.
• Next.js supports caching with static generation and ISR.
• Revalidation controls how often cache updates with fresh data.
• Cache reduces server load and improves user experience.
• Use caching for data that changes infrequently.

Key Takeaways

Cache in Next.js stores fetched data to avoid repeated requests and speed up pages.

Incremental Static Regeneration (ISR) lets you update cached pages after a set time.

Use caching for pages with data that changes occasionally to improve performance.

Revalidation time controls how fresh the cached data stays.

Caching reduces server load and creates a smoother user experience.