Next.js - Data Caching

---

---

In this chapter, we will learn all about data caching in Next.js and how clear data cache in using two methods.

What is Data Cache?

Data caching is a type of caching technique that persists the result of data fetches across incoming server requests and deployments. This is possible because Next.js extends the native fetch API to allow each request on the server to set its own persistent caching semantics.

How it Works?

• When a fetch request with the 'force-cache' option is made during rendering, Next.js first checks the Data Cache for an existing cached response.
• If a cached response is found, it's returned immediately. If a cached response is not found, the request is made to the data source, the result is stored in the Data Cache, and memoized.
• For uncached data (e.g. no cache option defined using { cache: 'no-store' }), the result is always fetched from the data source, and memoized.

Revalidating Data Cache

Cached data can be revalidated in two ways, with:

• On-demand Revalidation: Revalidate data based on an event (e.g. form submission). On-demand revalidation can use a tag-based or path-based approach to revalidate groups of data at once.
• Time-based Revalidation: Revalidate data after a specific time period. Time-based revalidation is used to ensure that the cache is up-to-date and that the data is not stale.

Cache Revalidation On-demand

On-demand revalidation is a technique used to revalidate the cache based on an event. This is used to ensure that the cache is up-to-date and that the data is not stale. In the code below, we have a page that fetches posts from an API endpoint. We have a button that revalidates the cache when clicked.

import { revalidatePath } from 'next/cache'

interface Post {
  id: number
  title: string
  body: string
}

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3', {
    cache: 'no-cache'
  })

  const posts: Post[] = await res.json()
  
  return {
    timestamp: new Date().toISOString(),
    posts,
    message: 'Posts will update when revalidated'
  }
}

async function handleRevalidate() {
  'use server'
  revalidatePath('/')
}

export default async function Home() {
  const data = await getData()
  
  return (
    <main>
      <h1>Path Revalidation Demo</h1>
      
      <div>
        <p>Last Updated: {data.timestamp}</p>
        <p>{data.message}</p>
        
        <div>
          {data.posts.map(post => (
            <div key={post.id}>
              <h2>{post.title}</h2>
            </div>
          ))}
        </div>
      </div>
      
      <form action={handleRevalidate}>
        <button type="submit">
          Fetch New Posts
        </button>
      </form>
    </main>
  )
}

Output

The image below shows the output of the code snippet above. When we click the button, the cache of the home page is revalidated, and new post is loaded.

Time-based Cache Revalidation

Time-based revalidation is a technique used to revalidate the cache after a specific time period. This is used to ensure that the cache is up-to-date and that the data is not stale. In the code snippet below, we have a page that revalidates every 5 seconds.

export const revalidate = 5 // revalidate every 5 seconds

async function getData() {
  // Simulate API call
  return {
    timestamp: new Date().toISOString(),
    randomValue: Math.random(),
    message: 'This page revalidates every 5 seconds'
  }
}

export default async function Page() {
  const data = await getData()
  
  return (
    <main>
        <h1>5 Second Revalidation</h1>
        <p>Timestamp: {data.timestamp}</p>
        <p>Random Value: {data.randomValue}</p>
        <p>{data.message}</p>
        <p>
            Next revalidation will occur 5 seconds after the last 
            revalidation
        </p>
    </main>
  )
}

Output

The image below shows output of the code snippet above. When we continuously refresh the page, we can see that the page revalidated (the new random number generated) only after every 5 seconds.