Cache debugging tools in NextJS - Mini Project: Build & Apply

Cache Debugging Tools in Next.js

📖 Scenario: You are building a Next.js app that fetches user data from an API. To improve performance, you want to implement caching and add simple debugging tools to check if the cache is working correctly.

🎯 Goal: Create a Next.js component that fetches user data, caches it in a React state, and shows debug info about the cache status.

📋 What You'll Learn

Create a React state variable to hold cached user data

Add a boolean config variable to enable or disable cache debugging

Implement a function to fetch user data and update the cache

Display the cached data and cache debug info in the component

💡 Why This Matters

🌍 Real World

Caching API data in Next.js apps improves performance and user experience by reducing repeated network requests.

💼 Career

Understanding cache debugging helps developers optimize data fetching and troubleshoot caching issues in real-world web applications.

1

Set up cached user data state

Create a React functional component called UserCacheDebug. Inside it, create a state variable called cachedUser initialized to null using useState.

NextJS

import React, { useState } from 'react';

export default function UserCacheDebug() {
  // Create cachedUser state initialized to null
  // Your code here
}

Need a hint?

Use const [cachedUser, setCachedUser] = useState(null); inside the component.

2

Add cache debugging config variable

Inside the UserCacheDebug component, add a constant boolean variable called isCacheDebug and set it to true.

NextJS

import React, { useState } from 'react';

export default function UserCacheDebug() {
  const [cachedUser, setCachedUser] = useState(null);
  // Add isCacheDebug variable set to true
  // Your code here
}

Need a hint?

Declare const isCacheDebug = true; inside the component.

3

Implement fetch and cache update function

Inside UserCacheDebug, write an async function called fetchUserData that fetches from 'https://jsonplaceholder.typicode.com/users/1'. When data is received, update cachedUser state using setCachedUser.

NextJS

import React, { useState } from 'react';

export default function UserCacheDebug() {
  const [cachedUser, setCachedUser] = useState(null);
  const isCacheDebug = true;

  // Write async fetchUserData function to fetch user and update cachedUser
  // Your code here
}

Need a hint?

Use fetch and await to get data, then call setCachedUser(data).

4

Display cached data and debug info

In the UserCacheDebug component's return statement, add a button with onClick calling fetchUserData. Below it, display the JSON string of cachedUser. If isCacheDebug is true, also show a paragraph with text Cache is active.

NextJS

import React, { useState } from 'react';

export default function UserCacheDebug() {
  const [cachedUser, setCachedUser] = useState(null);
  const isCacheDebug = true;

  async function fetchUserData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const data = await response.json();
    setCachedUser(data);
  }

  return (
    // Add button to fetch user data
    // Show cachedUser JSON
    // Show 'Cache is active' if isCacheDebug is true
    // Your code here
  );
}

Need a hint?

Use a button with onClick={fetchUserData}, show cachedUser JSON in a <pre>, and conditionally render the debug paragraph.