Why Fetch caching behavior in NextJS? - Purpose & Use Cases

The Big Idea

Discover how caching can make your web pages feel instant and smooth!

The Scenario

Imagine building a website that fetches data from a server every time a user visits a page, even if the data hasn't changed.

Each visit causes the browser to wait for the server response, slowing down the experience.

The Problem

Manually handling data fetching means repeated requests for the same data, wasting time and bandwidth.

This leads to slow page loads and a poor user experience.

The Solution

Fetch caching behavior automatically stores fetched data and reuses it when possible.

This reduces unnecessary network calls and speeds up page loading.

Before vs After

✗ Before

const response = await fetch('/api/data', { cache: 'no-store' }); // fetches every time, no caching
const data = await response.json();

✓ After

const response = await fetch('/api/data', { cache: 'force-cache' }); // uses cached data
const data = await response.json();

What It Enables

It enables faster, smoother user experiences by smartly reusing data without extra waiting.

Real Life Example

When you refresh a news website, cached articles load instantly instead of waiting for the server each time.

Key Takeaways

Manual fetching repeats network calls and slows pages.

Fetch caching stores and reuses data automatically.

This improves speed and reduces server load.