Caching in Next.js

Caching stores previously fetched data so it can be reused instead of requesting it again. This improves performance, speed, and scalability in Next.js applications.

Basic Idea

Instead of fetching data every time a user visits a page, Next.js can save the response and reuse it.

await fetch("https://api.example.com/data", {
  cache: "force-cache",
});

This tells Next.js to reuse stored data when possible.

Types of Caching

1️⃣ Static Cache (Default)

fetch("API", { cache: "force-cache" });

Data is cached and reused. Ideal for blogs, docs, and static content.

2️⃣ Dynamic (No Cache)

fetch("API", { cache: "no-store" });

Always fetches fresh data. Best for dashboards or live content.

3️⃣ Revalidated Cache

fetch("API", {
  next: { revalidate: 10 },
});

Cached data updates automatically after a time interval.

Server vs Client Caching

• ✅ Server Components → Full Next.js automatic caching support
• ⚠ Client Components → Browser/manual caching only

Next.js caching mainly works on the server because Server Components run before HTML is sent to the browser.

Real World Example

Imagine ordering coffee. Without caching, it’s prepared every time. With caching, the result is saved and served instantly — faster and more efficient.

Why Caching Matters

• ⚡ Faster page loads
• 📉 Reduced server/API load
• 📈 Better scalability
• ✨ Improved user experience

Interview Tip

Next.js caching stores fetched data on the server so it can be reused, improving performance and scalability while reducing unnecessary API requests.