Visual Guide to Next.js Caching

Cache States: The Basics

In Next.js, a cached request falls into one of these categories:

• HIT: Served from cache. Fast and efficient.
• MISS: Not in cache. New request made.
• STALE: In cache, but outdated.

Knowing these helps you debug and optimize your fetch requests.

Visualizing Cache with Chrome DevTools

Here's a quick way to see cache behavior in real applications:

1. Open Chrome DevTools (F12)
2. Go to Network tab
3. Right-click in the request list area
4. Navigate to "Header options" > "Response Headers" > "Manage Header Options"
5. Click "Add custom Header" and add "x-vercel-cache"
6. Enable "Cache Control" too

Now you'll see cache status and control info for each request.

Here's what it looks like:

You'll see those as columns in the Network tab.

Wrap Up

Visualizing cache behavior is key to optimizing your Next.js app. Use these tools to balance fresh data and performance.

Quiz 🧠

Test your understanding of caching in Next.js with this quick quiz:

---