Fetch caching behavior in NextJS - Mini Project: Build & Apply

Fetch Caching Behavior in Next.js

📖 Scenario: You are building a Next.js app that fetches user data from an API. To improve performance, you want to control how the data is cached when fetching it.

🎯 Goal: Create a Next.js Server Component that fetches user data from https://jsonplaceholder.typicode.com/users with caching disabled, then add a cache duration, and finally enable revalidation to update the cache every 10 seconds.

📋 What You'll Learn

Create a Server Component named UsersList that fetches user data with cache: 'no-store' option.

Add a variable cacheDuration set to 60000 (milliseconds).

Modify the fetch to use next: { revalidate: 10 } option to enable cache revalidation every 10 seconds.

Export the UsersList component as default.

💡 Why This Matters

🌍 Real World

Controlling fetch caching in Next.js helps improve app performance and user experience by reducing unnecessary network requests and keeping data fresh.

💼 Career

Understanding fetch caching is important for Next.js developers to optimize data fetching strategies in real-world web applications.

1

Create the initial fetch with caching disabled

Create a Server Component named UsersList. Inside it, use await fetch to get data from 'https://jsonplaceholder.typicode.com/users' with the option { cache: 'no-store' }. Then parse the response as JSON into a variable called users. Return a <ul> element with each user's name inside <li>.

NextJS

export default async function UsersList() {
  // Your code here
}

Need a hint?

Use fetch with { cache: 'no-store' } to disable caching.

2

Add a cache duration variable

Above the UsersList component, create a constant variable named cacheDuration and set it to 60000 (milliseconds).

NextJS

const cacheDuration = 60000

export default async function UsersList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users', { cache: 'no-store' });
  const users = await res.json();
  return (
    
      {users.map(user => {user.name})}
    
  );
}
// Your code here

Need a hint?

Define cacheDuration as a constant with value 60000.

3

Modify fetch to enable cache revalidation every 10 seconds

Inside the UsersList component, change the fetch options to use next: { revalidate: 10 } instead of { cache: 'no-store' }.

NextJS

const cacheDuration = 60000

export default async function UsersList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users', { next: { revalidate: 10 } });
  const users = await res.json();
  return (
    
      {users.map(user => {user.name})}
    
  );
}
// Your code here

Need a hint?

Use next: { revalidate: 10 } in fetch options to enable cache revalidation every 10 seconds.

4

Export the UsersList component as default

Ensure the UsersList component is exported as the default export at the bottom of the file.

NextJS

const cacheDuration = 60000

// Your code here

Need a hint?

Make sure the component is exported as default using export default.