Why Opting out of caching in NextJS? - Purpose & Use Cases

The Big Idea

What if your website could always show the freshest info without confusing users or tricky hacks?

The Scenario

Imagine you have a website that shows live sports scores. You try to update the page, but it keeps showing old scores because the browser or server saved a copy and keeps reusing it.

The Problem

Manually managing when to refresh or not refresh data is tricky. Cached pages can show outdated info, confusing users. Constantly clearing cache or adding special tricks is slow and error-prone.

The Solution

Next.js lets you easily tell the system when NOT to cache a page or data. This way, your page always shows fresh info without complicated hacks.

Before vs After

✗ Before

res.setHeader('Cache-Control', 'max-age=3600') // caches for 1 hour

✓ After

export const revalidate = 0 // disables caching, always fresh

What It Enables

You can build pages that always show the latest data, perfect for live updates or sensitive info.

Real Life Example

A news site showing breaking news that must update instantly without users seeing old headlines.

Key Takeaways

Manual cache control is hard and error-prone.

Next.js provides simple ways to opt out of caching.

This ensures users always see fresh, accurate data.