Data cache behavior in NextJS - Mini Project: Build & Apply

Data Cache Behavior in Next.js

📖 Scenario: You are building a simple Next.js app that fetches user data from an API. To improve performance, you want to cache the data so it doesn't fetch again on every request.

🎯 Goal: Create a Next.js component that fetches user data once and caches it using React's useState and useEffect. The component should display the user name and avoid refetching data unnecessarily.

📋 What You'll Learn

Create a state variable to store user data

Create a boolean state variable to track loading status

Use useEffect to fetch data only once when the component mounts

Display the user name after data is fetched

Avoid refetching data on re-renders

💡 Why This Matters

🌍 Real World

Caching data in React or Next.js apps improves performance by avoiding repeated network requests. This technique is common in user profile pages, dashboards, and any data-driven UI.

💼 Career

Understanding data fetching and caching is essential for frontend developers working with React and Next.js. It helps build fast, efficient, and user-friendly web applications.

1

Set up initial state variables

Create a React functional component called UserProfile. Inside it, create a state variable called user initialized to null and a state variable called loading initialized to true using useState.

NextJS

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

export default function UserProfile() {
  // Create user and loading state variables
  // Your code here
}

Hint

Use useState(null) for user and useState(true) for loading.

2

Add API URL configuration

Inside the UserProfile component, create a constant called apiUrl and set it to https://jsonplaceholder.typicode.com/users/1.

NextJS

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

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  // Create apiUrl constant
  // Your code here
}

Hint

Set apiUrl to the exact string 'https://jsonplaceholder.typicode.com/users/1'.

3

Fetch user data with useEffect and cache it

Use useEffect to fetch data from apiUrl only once when the component mounts. Inside useEffect, fetch the data, convert it to JSON, then update user with setUser and set loading to false. Use an empty dependency array [] to ensure it runs only once.

NextJS

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

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const apiUrl = 'https://jsonplaceholder.typicode.com/users/1';

  // Fetch user data once and cache it
  // Your code here
}

Hint

Use useEffect with an empty dependency array to fetch data once. Use fetch and update states inside then.

4

Render loading state and user name

Inside the UserProfile component's return statement, render a <div>. If loading is true, display the text Loading.... Otherwise, display the user's name inside a <h1> tag using user.name.

NextJS

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

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const apiUrl = 'https://jsonplaceholder.typicode.com/users/1';

  useEffect(() => {
    fetch(apiUrl)
      .then(response => response.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, []);

  return (
    
      {/* Show loading or user name here */}
      {/* Your code here */}
    
  );
}

Hint

Use a ternary operator inside JSX to show Loading... or the user's name in an <h1>.

Practice

1. In Next.js, what is the main benefit of using data caching?

easy

A. It increases the size of the app bundle

B. It forces the app to fetch data on every user action

C. It disables server-side rendering

D. It makes the app faster by reusing previously fetched data

Solution

1. Step 1: Understand what caching does

   Caching stores data so it can be reused without fetching again.

2. Step 2: Identify the benefit in Next.js context

   Reusing data avoids repeated fetches, making the app faster.

3. Final Answer:

   It makes the app faster by reusing previously fetched data -> Option D

4. Quick Check:

   Data caching = faster app [OK]

Hint: Caching saves time by reusing data, not refetching [OK]

Common Mistakes:

• Thinking caching increases app size
• Confusing caching with disabling server rendering
• Assuming caching forces more data fetches

2. Which Next.js function is used to fetch data at build time and cache it for static pages?

easy

A. getServerSideProps

B. getInitialProps

C. getStaticProps

D. useEffect

Solution

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

   getStaticProps fetches data at build time for static generation.

2. Step 2: Match function to caching behavior

   getStaticProps caches data during build, unlike getServerSideProps which runs on each request.

3. Final Answer:

   getStaticProps -> Option C

4. Quick Check:

   Build time data fetch = getStaticProps [OK]

Hint: Static props run once at build, caching data [OK]

Common Mistakes:

• Confusing getServerSideProps with build time fetching
• Using useEffect which runs on client side
• Thinking getInitialProps is for static caching

3. Consider this Next.js code snippet using getStaticProps with revalidate: 10. What happens when a user visits the page after 15 seconds since last build?

medium

A. The page triggers a background rebuild and shows cached data immediately

B. The page shows stale cached data and does not update

C. The page blocks rendering until new data is fetched

D. The page fetches data on the client side only

Solution

1. Step 1: Understand revalidate option in getStaticProps

   revalidate sets seconds after which Next.js regenerates the page in background.

2. Step 2: Analyze behavior after 15 seconds (greater than 10)

   Next.js serves cached page immediately and triggers background rebuild for next visitor.

3. Final Answer:

   The page triggers a background rebuild and shows cached data immediately -> Option A

4. Quick Check:

   revalidate triggers background rebuild = The page triggers a background rebuild and shows cached data immediately [OK]

Hint: Revalidate serves cached page, rebuilds in background [OK]

Common Mistakes:

• Thinking page blocks rendering until rebuild
• Assuming stale data is never updated
• Confusing client-side fetch with static regeneration

4. You notice your Next.js page using getServerSideProps is always slow. Which caching mistake might cause this?

medium

A. Not caching data on the server or client side, causing fetch on every request

B. Setting revalidate to 0 in getStaticProps

C. Using getStaticProps instead of getServerSideProps

D. Using client-side fetching inside getServerSideProps

Solution

1. Step 1: Identify caching behavior of getServerSideProps

   getServerSideProps runs on every request, so no built-in caching unless implemented.

2. Step 2: Recognize impact of missing caching

   Without caching, data fetch happens every time, causing slowness.

3. Final Answer:

   Not caching data on the server or client side, causing fetch on every request -> Option A

4. Quick Check:

   No caching with getServerSideProps = slow page [OK]

Hint: No caching on server fetch causes slow responses [OK]

Common Mistakes:

• Confusing getStaticProps with getServerSideProps
• Thinking revalidate affects getServerSideProps
• Trying client fetch inside server function

5. You want to cache user profile data that updates frequently but must show fresh info within 5 seconds. Which Next.js caching strategy fits best?

hard

A. Use getStaticProps with revalidate: 60 to regenerate every minute

B. Use getServerSideProps with server-side caching that expires after 5 seconds

C. Fetch data only on client side with no caching

D. Use getStaticProps without revalidate for static caching

Solution

1. Step 1: Analyze data freshness requirement

   Data must update within 5 seconds, so caching must expire quickly.

2. Step 2: Match caching strategy to freshness need

   getServerSideProps with server cache expiring after 5 seconds allows fresh data and caching.

3. Step 3: Eliminate other options

   getStaticProps with 60s revalidate is too slow; client-only fetch lacks caching; static without revalidate never updates.

4. Final Answer:

   Use getServerSideProps with server-side caching that expires after 5 seconds -> Option B

5. Quick Check:

   Fast update needs server cache with short expiry [OK]

Hint: Fast-changing data needs server cache with short expiry [OK]

Common Mistakes:

• Choosing static props with long revalidate time
• Ignoring caching and fetching only on client
• Using static props without revalidate for fresh data