Revalidation strategies (time-based) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is time-based revalidation in Next.js?

Time-based revalidation is a way to update static pages after a set time interval. It lets Next.js regenerate the page in the background while serving the old page, so users see fresh content without waiting.

beginner

How do you set a time-based revalidation interval in Next.js?

You set the 'revalidate' property in the 'getStaticProps' function's return object. For example, 'revalidate: 10' means Next.js will regenerate the page at most every 10 seconds.

beginner

What happens when a user requests a page before the revalidation time expires?

Next.js serves the cached static page immediately without regenerating it. The page stays the same until the revalidation time passes.

intermediate

Explain the user experience during background regeneration in time-based revalidation.

Users see the old page instantly while Next.js regenerates the page in the background. Once done, the new page replaces the old one for future visitors, ensuring fast load and fresh content.

intermediate

Why is time-based revalidation useful for websites with frequently changing data?

It balances performance and freshness. Pages load fast from cache but update regularly, so users get up-to-date content without slow page loads.

In Next.js, where do you specify the time interval for revalidation?

A Inside the 'revalidate' property returned by getStaticProps

B In the page component's useEffect hook

C In the next.config.js file

D In the _app.js file

The 'revalidate' property inside getStaticProps tells Next.js how often to regenerate the page.

What does Next.js do when a page is requested after the revalidation time has passed?

A Immediately regenerates the page and waits to serve it

B Serves the old page and regenerates the page in the background

C Returns a 404 error

D Redirects to the homepage

Next.js serves the cached page immediately and regenerates the page in the background for future requests.

What is the main benefit of time-based revalidation?

A Pages update regularly without slowing down user experience

B Pages never update after build

C Pages update instantly on every request

D Pages load slower but always show fresh data

Time-based revalidation updates pages regularly while keeping fast load times by serving cached pages.

If you set 'revalidate: 60', how often will Next.js regenerate the page?

A Every 60 minutes

B Every 60 milliseconds

C Every 60 seconds

D Only once at build time

'revalidate' is in seconds, so 60 means every 60 seconds (1 minute).

Which Next.js data fetching method supports time-based revalidation?

A useEffect hook

B getServerSideProps

C API routes

D getStaticProps

Only getStaticProps supports time-based revalidation with the 'revalidate' property.

Describe how time-based revalidation works in Next.js and why it improves user experience.

Think about how Next.js updates static pages after a set time without making users wait.

Explain how you would implement a page that updates every 30 seconds using Next.js time-based revalidation.

Focus on the revalidate property and what happens when users visit the page.

Practice

1. What does setting the revalidate property in getStaticProps do in Next.js?

easy

A. It tells Next.js to update the static page automatically after the specified seconds.

B. It disables static generation and forces server-side rendering.

C. It caches the page forever without any updates.

D. It triggers a client-side fetch to update the page content.

Solution

1. Step 1: Understand revalidate role in getStaticProps

   The revalidate property sets a time interval in seconds for Next.js to regenerate the static page in the background.

2. Step 2: Effect of setting revalidate

   After the specified time, Next.js updates the static page automatically without manual rebuilds or disabling static generation.

3. Final Answer:

   It tells Next.js to update the static page automatically after the specified seconds. -> Option A

4. Quick Check:

   Time-based revalidation = automatic page update [OK]

Hint: Remember: revalidate sets auto-update time in seconds [OK]

Common Mistakes:

• Thinking revalidate disables static generation
• Confusing revalidate with client-side fetching
• Assuming revalidate caches forever

2. Which of the following is the correct way to set a 10-second revalidation in getStaticProps?

easy

A. export async function getStaticProps() { return { props: {}, revalidate: null } }

B. export async function getStaticProps() { return { props: {}, revalidate: '10' } }

C. export async function getStaticProps() { return { props: {}, revalidate: true } }

D. export async function getStaticProps() { return { props: {}, revalidate: 10 } }

Solution

1. Step 1: Check the type of revalidate

   The revalidate value must be a number representing seconds.

2. Step 2: Validate each option's syntax

   export async function getStaticProps() { return { props: {}, revalidate: 10 } } uses a number 10 correctly. export async function getStaticProps() { return { props: {}, revalidate: '10' } } uses a string '10' which is invalid. The other options use boolean and null, which are incorrect types.

3. Final Answer:

   export async function getStaticProps() { return { props: {}, revalidate: 10 } } -> Option D

4. Quick Check:

   revalidate must be a number [OK]

Hint: Use a number for revalidate seconds, not string or boolean [OK]

Common Mistakes:

• Using string instead of number for revalidate
• Setting revalidate to true or null
• Forgetting to return revalidate inside the returned object

3. Given this code snippet in getStaticProps:

export async function getStaticProps() {
  return {
    props: { time: Date.now() },
    revalidate: 5
  }
}

What will happen if you visit the page multiple times within 3 seconds?

medium

A. The page will show the same time value for all visits within 3 seconds.

B. The page will update time on every visit regardless of time.

C. The page will throw an error because revalidate is too short.

D. The page will never update the time value.

Solution

1. Step 1: Understand revalidate timing

   The revalidate: 5 means Next.js regenerates the page at most every 5 seconds.

2. Step 2: Behavior within 3 seconds

   Visiting within 3 seconds means the cached page is served with the same time value because regeneration hasn't happened yet.

3. Final Answer:

   The page will show the same time value for all visits within 3 seconds. -> Option A

4. Quick Check:

   Revalidate interval controls update frequency [OK]

Hint: Page updates only after revalidate seconds pass [OK]

Common Mistakes:

• Expecting page to update on every visit
• Thinking revalidate causes errors if too small
• Assuming page never updates after first build

4. You set revalidate: 0 in getStaticProps. What is the problem with this code?

medium

A. It causes the page to never render.

B. It caches the page forever without updates.

C. It disables static generation and causes a build error.

D. It causes the page to regenerate on every request, similar to server-side rendering.

Solution

1. Step 1: Understand revalidate: 0 meaning

   Setting revalidate to 0 disables Incremental Static Regeneration (ISR). The page is generated at build time and cached forever without background regeneration.

2. Step 2: Effect on page behavior

   This results in no automatic updates, which is the problem if revalidation was intended, behaving like static generation without ISR.

3. Final Answer:

   It caches the page forever without updates. -> Option B

4. Quick Check:

   revalidate 0 = no ISR, cache forever [OK]

Hint: revalidate: 0 caches forever, no updates [OK]

Common Mistakes:

• Thinking revalidate: 0 regenerates on every request
• Believing it causes a build error
• Assuming it prevents the page from rendering

5. You want a page to update its static content every 60 seconds but only if the content has changed. Which Next.js feature combined with revalidate helps achieve this efficiently?

hard

A. Use getServerSideProps instead of getStaticProps.

B. Use revalidate: false to disable updates and manually rebuild.

C. Use revalidate: 60 with Incremental Static Regeneration (ISR) and conditional data fetching.

D. Set revalidate: 0 to regenerate on every request.

Solution

1. Step 1: Understand ISR with revalidate

   Incremental Static Regeneration (ISR) allows pages to update after a set time without full rebuilds.

2. Step 2: Combine with conditional data fetching

   Fetching data conditionally inside getStaticProps ensures updates only when content changes, saving resources.

3. Final Answer:

   Use revalidate: 60 with Incremental Static Regeneration (ISR) and conditional data fetching. -> Option C

4. Quick Check:

   ISR + revalidate = efficient timed updates [OK]

Hint: ISR with revalidate controls timed updates smartly [OK]

Common Mistakes:

• Using getServerSideProps which disables static caching
• Setting revalidate to false which is invalid
• Using revalidate 0 causing regen every request