next-cache-toolbar

A toolbar that helps to identify data cache entries

How to use it?

next-cache-toolbar requires to use app router

Create file that we will lazy loading later to avoid bundling next-cache-toolbar in production

// app/toolbar.jsx
import { NextCacheToolbar } from "next-cache-toolbar";
import "next-cache-toolbar/style.css";

export default function Toolbar() {
	return <NextCacheToolbar />;
}

// app/layout.jsx
import dynamic from "next/dynamic";

let Toolbar = () => null;

if (process.env.NODE_ENV === "development") {
	Toolbar = dynamic(() => import("./toolbar"));
}

export default function Layout({ children }) {
  return (
    <html>
      <head/>
      <body>
        {children}
        <Toolbar />
      </body>
    </html>
  );
}

Keep the check on process.env.NODE_ENV. Next.js replaces it with a constant during next build, so the import("./toolbar") branch is removed from production builds together with the toolbar's code, styles and server actions.

Do not gate the toolbar on your own environment variable alone (e.g. process.env.NEXT_PUBLIC_SHOW_TOOLBAR === "true"). If that variable is not set while running next build, the check stays a runtime lookup, and the toolbar is bundled into production even though it never renders.

How does data cache work?

There are two cases when data cache is used:

• wrapping any function with unstable_cache
• adding next options to fetch call

Both cases will store returned data inside .next/cache/fetch-cache folder in format

{
  "kind": "FETCH",
  "revalidate": 30,
  "tags": [],
  "data": {
    "body": "...",
    "headers": {},
    "status": 200,
    "url": "..."
  }
}

There is one caveat, when using unstable_cache stored data will do not have any headers while body will be in plain JSON. But when using fetch with next options all headers from response will be present and body will be encoded using base64. Nevertheless both of these approaches stores all data as well as revalidate time and tags.