Why caching is central to Next.js

Introduction

Caching helps Next.js show pages faster by saving parts of the website. This means users don't have to wait long for pages to load.

When you want your website to load quickly for visitors.

When your site has pages that don't change often.

When you want to reduce the work your server does.

When you want to save data so users can see it even if offline.

When you want to improve your website's performance on slow internet.

Syntax

NextJS

export async function getStaticProps() {
  // fetch data here
  const data = {};
  return {
    props: { data },
    revalidate: 60, // cache this page for 60 seconds
  };
}

revalidate tells Next.js how long to keep the cached page before updating it.

Caching works automatically with Next.js data fetching methods like getStaticProps.

Examples

This caches the page for 10 seconds before Next.js fetches fresh data.

NextJS

export async function getStaticProps() {
  return {
    props: { message: 'Hello!' },
    revalidate: 10,
  };
}

Server-side rendering does not cache by default, so pages load fresh every time.

NextJS

export async function getServerSideProps() {
  // No caching here, runs on every request
  return { props: { time: Date.now() } };
}

This caches the page for one hour, good for content that changes rarely.

NextJS

export async function getStaticProps() {
  return {
    props: { data: 'Static content' },
    revalidate: 3600, // cache for 1 hour
  };
}

Sample Program

This Next.js page shows the time it was generated. It caches the page for 30 seconds, so users see the same time if they visit within that period. After 30 seconds, Next.js updates the page with the new time.

NextJS

export async function getStaticProps() {
  const time = new Date().toLocaleTimeString();
  return {
    props: { time },
    revalidate: 30,
  };
}

export default function TimePage({ time }) {
  return (
    <main>
      <h1>Current Time</h1>
      <p>This page was generated at: {time}</p>
      <p>It will update every 30 seconds.</p>
    </main>
  );
}

Important Notes

Caching improves speed but remember to set the right time so users get fresh data when needed.

Next.js handles caching automatically when you use revalidate with static props.

Too long caching can show old data; too short caching can reduce performance benefits.

Summary

Caching saves website parts to load pages faster.

Next.js uses caching with revalidate to control how often pages update.

Good caching balances fresh data and fast loading.

Practice

1. Why is caching important in Next.js for website performance?

easy

A. It stores parts of the website to load pages faster.

B. It deletes all data after every page load.

C. It slows down the website to save energy.

D. It disables JavaScript on the page.

Solution

1. Step 1: Understand caching purpose

   Caching saves website parts so they don't need to be rebuilt every time.

2. Step 2: Connect caching to Next.js performance

   Next.js uses caching to serve pages quickly by reusing saved content.

3. Final Answer:

   It stores parts of the website to load pages faster. -> Option A

4. Quick Check:

   Caching = Faster page loads [OK]

Hint: Caching means saving parts to speed up loading [OK]

Common Mistakes:

• Thinking caching deletes data after load
• Believing caching slows down the site
• Confusing caching with disabling JavaScript

2. Which Next.js feature controls how often cached pages update?

easy

A. revalidate

B. getStaticProps

C. useEffect

D. getServerSideProps

Solution

1. Step 1: Identify caching update control

   Next.js uses the revalidate property to set cache refresh timing.

2. Step 2: Differentiate from other features

   getStaticProps fetches data at build time, useEffect runs on client, getServerSideProps fetches on every request.

3. Final Answer:

   revalidate -> Option A

4. Quick Check:

   Cache update timing = revalidate [OK]

Hint: Look for 'revalidate' to set cache refresh time [OK]

Common Mistakes:

• Confusing getStaticProps with cache timing
• Using useEffect for server caching
• Thinking getServerSideProps controls caching

3. What will happen if you set revalidate: 10 in getStaticProps?

medium

A. The page updates on every request.

B. The page updates every 10 seconds after first load.

C. The page never updates after build.

D. The page updates every 10 minutes.

Solution

1. Step 1: Understand revalidate value meaning

   Setting revalidate: 10 means Next.js will refresh the cached page every 10 seconds.

2. Step 2: Compare with other options

   It does not update on every request, never after build, nor every 10 minutes.

3. Final Answer:

   The page updates every 10 seconds after first load. -> Option B

4. Quick Check:

   revalidate: 10 means 10 seconds refresh [OK]

Hint: revalidate number = seconds between cache refresh [OK]

Common Mistakes:

• Thinking revalidate is minutes, not seconds
• Believing page never updates with revalidate
• Confusing revalidate with server-side rendering

4. You set revalidate: '10' (string) instead of 10 (number). What happens?

medium

A. Next.js updates the page every 10 minutes.

B. Next.js treats it as 10 seconds anyway.

C. Next.js ignores revalidate and never updates the page.

D. Next.js throws a type error and fails to build.

Solution

1. Step 1: Check revalidate type requirement

   Next.js expects revalidate as a number, not a string.

2. Step 2: Understand error on wrong type

   Passing a string causes a type error and build failure.

3. Final Answer:

   Next.js throws a type error and fails to build. -> Option D

4. Quick Check:

   revalidate must be number, string causes error [OK]

Hint: Use number type for revalidate, not string [OK]

Common Mistakes:

• Passing string instead of number for revalidate
• Assuming Next.js auto-converts string to number
• Ignoring build errors caused by wrong types

5. You want a page to show fresh data but still load fast. Which caching strategy fits best in Next.js?

hard

A. Disable caching completely.

B. Use getServerSideProps to fetch data on every request.

C. Set revalidate to a low number like 5 seconds.

D. Set revalidate to a very high number like 86400 seconds.

Solution

1. Step 1: Balance freshness and speed

   Low revalidate means data updates often but still uses cache for speed.

2. Step 2: Compare other options

   getServerSideProps fetches every time but is slower; very high revalidate delays updates; disabling cache hurts speed.

3. Final Answer:

   Set revalidate to a low number like 5 seconds. -> Option C

4. Quick Check:

   Low revalidate = fresh + fast [OK]

Hint: Low revalidate balances fresh data and speed [OK]

Common Mistakes:

• Choosing getServerSideProps for speed
• Setting revalidate too high losing freshness
• Disabling cache hurting performance