Cache invalidation strategies in NextJS - Mini Project: Build & Apply

Cache Invalidation Strategies in Next.js

📖 Scenario: You are building a Next.js app that shows a list of blog posts fetched from an API. To improve performance, you want to cache the posts but also update the cache when new posts are added or existing posts change.

🎯 Goal: Build a Next.js component that fetches blog posts, caches them using useState, and implements a simple cache invalidation strategy to refresh the posts every 10 seconds.

📋 What You'll Learn

Create a state variable to hold the list of posts

Create a variable for the cache refresh interval (10 seconds)

Use useEffect to fetch posts and update the cache

Set up a timer to invalidate the cache and refetch posts every 10 seconds

💡 Why This Matters

🌍 Real World

Caching and cache invalidation are important for improving app performance and ensuring users see fresh data without unnecessary delays.

💼 Career

Understanding cache invalidation strategies is valuable for frontend developers working with data fetching in React and Next.js apps to build efficient and user-friendly interfaces.

1

Set up initial posts state

Create a state variable called posts using useState and initialize it as an empty array.

NextJS

import React, { useState, useEffect } from 'react';

export default function BlogPosts() {
  // Create a state variable called posts initialized to an empty array
  const [posts, setPosts] = useState([]);
}

Hint

Use const [posts, setPosts] = useState([]) inside the component.

2

Add cache refresh interval variable

Inside the BlogPosts component, create a constant called refreshInterval and set it to 10000 (milliseconds).

NextJS

import React, { useState, useEffect } from 'react';

export default function BlogPosts() {
  const [posts, setPosts] = useState([]);
  // Create a constant refreshInterval set to 10000
  const refreshInterval = 10000;
}

Hint

Use const refreshInterval = 10000; inside the component.

3

Fetch posts and update cache

Use useEffect to fetch posts from 'https://jsonplaceholder.typicode.com/posts' and update the posts state using setPosts. Fetch the posts once when the component mounts.

NextJS

import React, { useState, useEffect } from 'react';

export default function BlogPosts() {
  const [posts, setPosts] = useState([]);
  const refreshInterval = 10000;

  // Use useEffect to fetch posts once on mount and update posts state
  useEffect(() => {
    // Your code here
  }, []);
}

Hint

Inside useEffect, create an async function to fetch posts and call it immediately.

4

Add cache invalidation with interval

Extend the useEffect to set up an interval that refetches posts every refreshInterval milliseconds. Clear the interval when the component unmounts.

NextJS

import React, { useState, useEffect } from 'react';

export default function BlogPosts() {
  const [posts, setPosts] = useState([]);
  const refreshInterval = 10000;

  useEffect(() => {
    async function fetchPosts() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setPosts(data);
    }
    fetchPosts();

    // Set interval to refetch posts every refreshInterval milliseconds
    const intervalId = setInterval(fetchPosts, refreshInterval);

    // Clear interval on component unmount
    return () => clearInterval(intervalId);
  }, [refreshInterval]);
}

Hint

Use setInterval inside useEffect to call fetchPosts repeatedly, and clear it on cleanup.

Practice

1. In Next.js, which method allows you to update static pages after a certain time interval to keep data fresh without rebuilding the entire site?

easy

A. getServerSideProps without caching

B. Manually clearing browser cache

C. Using client-side useEffect to fetch data

D. getStaticProps with revalidate

Solution

1. Step 1: Understand Next.js data fetching methods

   getStaticProps generates static pages at build time, but with revalidate, it can update pages after a set interval.

2. Step 2: Compare with other methods

   getServerSideProps fetches fresh data on every request but does not use caching or revalidation intervals.

3. Final Answer:

   getStaticProps with revalidate -> Option D

4. Quick Check:

   Incremental Static Regeneration = getStaticProps + revalidate [OK]

Hint: Remember: revalidate updates static pages periodically [OK]

Common Mistakes:

• Confusing getServerSideProps with revalidation
• Thinking client-side fetching is cache invalidation
• Assuming manual browser cache clearing affects server cache

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

easy

A. return { props: {}, revalidate: 10 }

B. return { props: {}, revalidateTime: 10 }

C. return { props: {}, cache: 10 }

D. return { props: {}, refresh: 10 }

Solution

1. Step 1: Recall the correct property name for revalidation

   The Next.js documentation specifies revalidate as the property to set seconds for incremental static regeneration.

2. Step 2: Check the return object structure

   The return object from getStaticProps must include props and optionally revalidate with a number value.

3. Final Answer:

   return { props: {}, revalidate: 10 } -> Option A

4. Quick Check:

   Property name is revalidate [OK]

Hint: Use exact property name 'revalidate' in return object [OK]

Common Mistakes:

• Using incorrect property names like 'revalidateTime' or 'refresh'
• Placing revalidate outside the return object
• Setting revalidate as a string instead of a number

3. Consider this Next.js code snippet:

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

What will happen if you visit this page multiple times within 5 seconds?

medium

A. The page will throw an error due to Date.now() in getStaticProps

B. The page will show the same timestamp for all visits within 5 seconds

C. The page will update the timestamp on every visit

D. The page will never update the timestamp

Solution

1. Step 1: Understand revalidate behavior

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

2. Step 2: Predict output within 5 seconds

   Within 5 seconds, the cached page is served, so the timestamp remains the same for all visits.

3. Final Answer:

   The page will show the same timestamp for all visits within 5 seconds -> Option B

4. Quick Check:

   Revalidate interval caches page for 5 seconds [OK]

Hint: Revalidate caches page until interval expires [OK]

Common Mistakes:

• Assuming timestamp updates on every visit
• Thinking Date.now() causes errors in static props
• Believing revalidate disables caching

4. You wrote this code in Next.js:

export async function getStaticProps() {
  return {
    props: { data: await fetchData() },
    revalidate: '10'
  };
}

Why does this cause a problem?

medium

A. Because revalidate must be a number, not a string

B. Because fetchData cannot be awaited in getStaticProps

C. Because props must be a function, not an object

D. Because revalidate cannot be used with getStaticProps

Solution

1. Step 1: Check the type of revalidate

   The revalidate property expects a number representing seconds, not a string.

2. Step 2: Understand impact of wrong type

   Passing a string causes Next.js to throw a type error or ignore the revalidation, breaking cache invalidation.

3. Final Answer:

   revalidate must be a number, not a string -> Option A

4. Quick Check:

   Revalidate value type = number [OK]

Hint: Use number type for revalidate seconds [OK]

Common Mistakes:

• Passing revalidate as a string
• Thinking async/await is disallowed in getStaticProps
• Confusing props structure requirements

5. You want to always serve fresh data on every request in Next.js without caching. Which method should you use and why?

hard

A. Use getStaticProps without revalidate

B. Use getStaticProps with revalidate: 0

C. Use getServerSideProps because it runs on every request

D. Use client-side fetching only with useEffect

Solution

1. Step 1: Identify method for fresh data every request

   getServerSideProps runs on the server for every page request, ensuring fresh data.

2. Step 2: Compare with static methods

   getStaticProps generates static pages at build time or with revalidation intervals, so it does not guarantee fresh data every request.

3. Final Answer:

   Use getServerSideProps because it runs on every request -> Option C

4. Quick Check:

   Fresh data every request = getServerSideProps [OK]

Hint: Always fresh data? Use getServerSideProps [OK]

Common Mistakes:

• Using revalidate: 0 expecting no caching
• Relying only on client-side fetching for SEO
• Confusing static and server-side methods