Opting out of caching in NextJS - Performance & Optimization

Performance: Opting out of caching

HIGH IMPACT

This affects page load speed and server response time by disabling cache reuse, causing repeated data fetching or rendering.

Serving dynamic content without caching

NextJS

export const revalidate = 60;

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { next: { revalidate: 60 } });
  const data = await res.json();
  return <div>{data.value}</div>;
}

Allows Next.js to cache the page or data for 60 seconds, reducing server work and speeding up response.

📈 Performance GainReduces LCP by 200-500ms on repeat visits, lowers server CPU usage

Serving dynamic content without caching

NextJS

export const revalidate = 0;

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
  const data = await res.json();
  return <div>{data.value}</div>;
}

Disabling cache causes every request to fetch fresh data and re-render, increasing server load and delaying response.

📉 Performance CostBlocks rendering for every request, increasing LCP by 200-500ms depending on data size and network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching (revalidate=0)	Same DOM nodes each request	Multiple reflows due to delayed HTML	Higher paint cost due to slower load	[X] Bad
Caching enabled (revalidate>0)	Same DOM nodes reused	Single reflow on initial load	Lower paint cost due to faster load	[OK] Good

Rendering Pipeline

When caching is disabled, each request triggers fresh data fetching and server-side rendering, increasing server processing and delaying HTML delivery. This delays Style Calculation, Layout, and Paint on the client.

→Server Data Fetch

→Server Render

→Style Calculation

→Layout

→Paint

⚠️ BottleneckServer Render and Data Fetch stages

Core Web Vital Affected

LCP

This affects page load speed and server response time by disabling cache reuse, causing repeated data fetching or rendering.

Optimization Tips

1Avoid setting revalidate=0 unless absolutely necessary.

2Use incremental static regeneration (ISR) with a short revalidate time for fresh but cached content.

3Check cache headers in Network tab to verify caching behavior.

Performance Quiz - 3 Questions

What is the main performance impact of opting out of caching in Next.js?

A Page loads instantly from cache with no delay

B Every request fetches fresh data and re-renders, increasing load time

C Browser caches static assets only

D No impact on server load

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, check if responses have cache-control headers and if requests are served from cache

What to look for: Look for 'x-nextjs-cache' header or status '304 Not Modified' indicating caching; absence means no caching and slower loads

Practice

1. In Next.js, how do you disable caching for a page to always fetch fresh content?

easy

A. Set cache: false in next.config.js

B. Use getStaticProps without any options

C. Add no-cache header in _app.js

D. Set export const revalidate = 0; in the page file

Solution

1. Step 1: Understand Next.js caching control

   Next.js uses the revalidate export to control caching duration for static pages.

2. Step 2: Disable caching by setting revalidate to zero

   Setting revalidate = 0 tells Next.js to never cache and always fetch fresh data.

3. Final Answer:

   Set export const revalidate = 0; in the page file -> Option D

4. Quick Check:

   revalidate = 0 disables caching [OK]

Hint: Remember: revalidate = 0 means no caching [OK]

Common Mistakes:

• Confusing revalidate with cache settings in config
• Trying to disable caching via headers only
• Omitting the export keyword for revalidate

2. Which of the following is the correct syntax to disable caching in a Next.js page?

easy

A. export const revalidate = '0';

B. export const revalidate = 0;

C. const revalidate = 0;

D. export default revalidate = 0;

Solution

1. Step 1: Check correct export syntax

   In Next.js, caching control requires exporting a constant named revalidate.

2. Step 2: Use number zero without quotes

   The value must be a number 0, not a string, and must be exported properly.

3. Final Answer:

   export const revalidate = 0; -> Option B

4. Quick Check:

   Correct export with number zero disables caching [OK]

Hint: Use number 0 without quotes and export it [OK]

Common Mistakes:

• Using string '0' instead of number 0
• Not exporting the variable
• Using default export incorrectly

3. Given this Next.js page code snippet, what will be the caching behavior?

export const revalidate = 0;

export default function Page() {
  return <h1>Fresh Content</h1>;
}

medium

A. The page is never cached and always fetches fresh content

B. The page is cached and refreshed every 10 seconds

C. The page is cached indefinitely

D. The page throws a runtime error due to invalid revalidate value

Solution

1. Step 1: Identify the revalidate value

   The code sets revalidate = 0, which disables caching.

2. Step 2: Understand effect on page behavior

   With caching disabled, the page always fetches fresh content on each request.

3. Final Answer:

   The page is never cached and always fetches fresh content -> Option A

4. Quick Check:

   revalidate = 0 means no caching [OK]

Hint: revalidate 0 means always fresh, no cache [OK]

Common Mistakes:

• Assuming default caching applies
• Thinking 0 means cache forever
• Confusing with ISR default timing

4. You wrote this code to disable caching but the page still caches:

const revalidate = 0;

export default function Page() {
  return <div>No Cache</div>;
}

What is the error?

medium

A. Missing export keyword for revalidate

B. revalidate cannot be zero

C. Page component must be a class

D. Return statement syntax is incorrect

Solution

1. Step 1: Check revalidate declaration

   The variable revalidate must be exported to affect caching.

2. Step 2: Identify missing export

   Without export, Next.js ignores the variable and uses default caching.

3. Final Answer:

   Missing export keyword for revalidate -> Option A

4. Quick Check:

   revalidate must be exported to disable caching [OK]

Hint: Always export revalidate to control caching [OK]

Common Mistakes:

• Forgetting to export revalidate
• Thinking revalidate must be non-zero
• Confusing functional and class components

5. You want a Next.js page to always show fresh data but only disable caching for authenticated users. Which approach correctly opts out of caching only for them?

hard

A. Set revalidate = 0 inside getStaticProps conditionally

B. Set export const revalidate = 0; unconditionally in the page file

C. Use server-side rendering with export const dynamic = 'force-dynamic'; and check auth inside

D. Add Cache-Control: no-store header in _app.js for all requests

Solution

1. Step 1: Understand conditional caching needs

   Disabling caching only for authenticated users requires dynamic rendering based on request context.

2. Step 2: Use dynamic rendering with auth check

   Setting export const dynamic = 'force-dynamic'; forces server-side rendering, allowing auth checks per request.

3. Step 3: Why other options fail

   Set export const revalidate = 0; unconditionally in the page file disables caching for all users; Set revalidate = 0 inside getStaticProps conditionally is invalid because revalidate is static; Add Cache-Control: no-store header in _app.js for all requests affects all requests globally.

4. Final Answer:

   Use server-side rendering with export const dynamic = 'force-dynamic'; and check auth inside -> Option C

5. Quick Check:

   Dynamic rendering enables conditional caching [OK]

Hint: Use dynamic rendering to control caching per user [OK]

Common Mistakes:

• Trying to set revalidate conditionally inside getStaticProps
• Disabling caching globally instead of per user
• Misusing cache headers in _app.js