Cache debugging tools in NextJS

Introduction

Cache debugging tools help you find and fix problems with stored data that your app uses to load faster.

When your Next.js app shows old or wrong data after updates.

If your page does not update even after changing content.

When you want to check what data is saved in cache during development.

If you suspect caching is causing bugs or slow loading.

To understand how Next.js caches server or client data.

Syntax

NextJS

import { cache } from 'react';

// Use cache to store and retrieve data
const data = cache(() => fetchData());

Next.js uses React's cache for server components and data fetching.

You can inspect cache entries in browser DevTools or server logs.

Examples

This caches the API data so repeated calls use stored data.

NextJS

import { cache } from 'react';

const getData = cache(() => fetch('/api/data').then(res => res.json()));

You can force fresh data loading by changing a cache-busting key parameter.

NextJS

import { useEffect, useState } from 'react';
import { cache } from 'react';

const [cacheKey, setCacheKey] = useState(0);
const getData = cache((key) => fetch('/api/data').then(res => res.json()));

useEffect(() => {
  getData(cacheKey);
}, [cacheKey]);

Sample Program

This component fetches data once and caches it. Clicking the button uses a new cache-busting key to bypass the cache and reload fresh data. The console logs show when data is fetched, helping debug caching.

NextJS

'use client';

import React, { useState, useEffect } from 'react';
import { cache } from 'react';

const fetchData = (key) => {
  console.log('Fetching data...', key);
  return new Promise(resolve => setTimeout(() => resolve('Hello from API'), 1000));
};

const cachedFetch = cache(fetchData);

export default function CacheDebugDemo() {
  const [data, setData] = useState('Loading...');
  const [reloadKey, setReloadKey] = useState(0);

  useEffect(() => {
    cachedFetch(reloadKey).then(result => setData(result));
  }, [reloadKey]);

  return (
    <main>
      <h1>Cache Debugging Demo</h1>
      <p>Data: {data}</p>
      <button onClick={() => {
        const newKey = Math.random();
        setData('Loading...');
        cachedFetch(newKey).then(result => setData(result));
      }} aria-label="Reload data">
        Reload Data
      </button>
    </main>
  );
}

Important Notes

Use browser DevTools Network tab to see if data is loaded from cache or network.

Clearing cache helps when data changes but UI does not update.

Console logs inside fetch functions help track cache usage.

Summary

Cache debugging tools help find issues with stored data in Next.js apps.

You can cache data using React's cache and clear it to reload fresh data.

Use console logs and browser DevTools to understand cache behavior.