Why caching is central to Next.js - See It in Action

Why caching is central to Next.js

📖 Scenario: You are building a simple Next.js app that fetches user data from an API. To make the app faster and reduce repeated network calls, you will use caching techniques.

🎯 Goal: Create a Next.js component that fetches user data and caches it to avoid repeated API calls, demonstrating why caching is central to Next.js performance.

📋 What You'll Learn

Create a data fetching function that returns a fixed user object

Add a cache variable to store the fetched data

Use the cache to return data if available instead of fetching again

Render the user data in a React component

💡 Why This Matters

🌍 Real World

Caching user data in Next.js apps helps reduce slow network calls and improves user experience by showing data faster.

💼 Career

Understanding caching is important for Next.js developers to build fast, scalable web apps that handle data efficiently.

1

Create a data fetching function

Create an async function called fetchUserData that returns an object with name set to "Alice" and age set to 30.

NextJS

# Your code here

Need a hint?

Use an async function that returns a fixed object with name and age.

2

Add a cache variable

Add a variable called userCache and set it to null to hold cached user data.

NextJS

async function fetchUserData() {
  return { name: "Alice", age: 30 };
}

# Your code here

Need a hint?

Use let userCache = null; to create a cache variable.

3

Use cache in data fetching

Modify fetchUserData to first check if userCache is not null. If so, return userCache. Otherwise, fetch the data, store it in userCache, and then return it.

NextJS

async function fetchUserData() {
  return { name: "Alice", age: 30 };
}

let userCache = null;

# Your code here

Need a hint?

Check if userCache has data before fetching. Save fetched data to userCache.

4

Render cached data in a Next.js component

Create a React functional component called UserProfile that uses useEffect and useState to call fetchUserData once and display the user's name and age inside a <div>.

NextJS

let userCache = null;

async function fetchUserData() {
  if (userCache !== null) {
    return userCache;
  }
  const data = { name: "Alice", age: 30 };
  userCache = data;
  return data;
}

// Your code here

Need a hint?

Use useState to hold user data and useEffect to fetch once on mount. Render user name and age inside paragraphs.