Router cache on client in NextJS - Mini Project: Build & Apply

Router Cache on Client in Next.js

📖 Scenario: You are building a Next.js app that fetches user profile data from an API. To improve user experience, you want to cache the fetched data on the client side so that when users navigate back to the profile page, the app shows the cached data instantly without refetching.

🎯 Goal: Build a Next.js client component that caches user profile data after fetching it once. When the user revisits the profile page, the cached data is shown immediately. If no cached data exists, fetch from the API and then cache it.

📋 What You'll Learn

Create a React state variable to hold the user profile data

Create a cache object outside the component to store fetched data

Fetch user profile data from a mock API endpoint only if not cached

Use Next.js client component with hooks to manage state and effects

💡 Why This Matters

🌍 Real World

Caching API data on the client improves app speed and user experience by avoiding unnecessary network requests.

💼 Career

Understanding client-side caching and React hooks is essential for building efficient Next.js applications in professional web development.

1

Set up initial user profile state

Create a Next.js client component called UserProfile. Inside it, create a React state variable called profile initialized to null using useState.

NextJS

"use client";
import { useState } from "react";

export default function UserProfile() {
  // Create a state variable called profile initialized to null
  // Your code here
}

Hint

Use useState(null) to create the profile state variable.

2

Create a cache object outside the component

Above the UserProfile component, create a constant object called profileCache initialized as an empty object {}. This will store cached profile data.

NextJS

"use client";
import { useState } from "react";

// Create an empty object called profileCache to store cached data
// Your code here

export default function UserProfile() {
  const [profile, setProfile] = useState(null);
}

Hint

Define const profileCache = {} outside the component function.

3

Fetch profile data with caching logic

Inside UserProfile, use useEffect to fetch profile data from '/api/profile' only if profileCache.data is not set. If cached data exists, set profile state from cache. If not, fetch from API, update profileCache.data, and then update profile state.

NextJS

"use client";
import { useState, useEffect } from "react";

const profileCache = {};

export default function UserProfile() {
  const [profile, setProfile] = useState(null);

  // Use useEffect to check cache and fetch profile data
  // Your code here
}

Hint

Use useEffect with an empty dependency array to run once. Check profileCache.data. If it exists, set state. Otherwise, fetch and cache.

4

Render profile data or loading message

Inside the UserProfile component's return statement, render a <div>. If profile is null, show Loading profile.... Otherwise, display the user's name inside a <h1> and email inside a <p>.

NextJS

"use client";
import { useState, useEffect } from "react";

const profileCache = {};

export default function UserProfile() {
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    if (profileCache.data) {
      setProfile(profileCache.data);
    } else {
      fetch('/api/profile')
        .then(res => res.json())
        .then(data => {
          profileCache.data = data;
          setProfile(data);
        });
    }
  }, []);

  return (
    
      {/* Show loading or profile info here */}
      {/* Your code here */}
    
  );
}

Hint

Use a conditional (ternary) operator inside JSX to show loading text or profile details.

Practice

1. What is the main purpose of router cache on the client in Next.js?

easy

A. To disable client-side navigation completely

B. To speed up navigation by storing visited pages locally

C. To increase server load by fetching pages repeatedly

D. To prevent users from accessing certain pages

Solution

1. Step 1: Understand router cache concept

   Router cache stores pages visited by the user on the client side to avoid reloading them from the server.

2. Step 2: Identify the effect on navigation speed

   By storing pages locally, navigation becomes faster and smoother because the browser doesn't need to fetch the page again.

3. Final Answer:

   To speed up navigation by storing visited pages locally -> Option B

4. Quick Check:

   Router cache = faster navigation [OK]

Hint: Router cache means storing pages locally for faster navigation [OK]

Common Mistakes:

• Thinking router cache increases server load
• Confusing cache with disabling navigation
• Assuming cache blocks page access

2. Which Next.js router method is used to prefetch a page and cache it on the client?

easy

A. router.prefetch()

B. router.load()

C. router.cache()

D. router.fetch()

Solution

1. Step 1: Recall Next.js router methods

   Next.js provides a method called router.prefetch() to load pages in advance.

2. Step 2: Match method to caching behavior

   router.prefetch() loads the page and stores it in the client cache for faster navigation.

3. Final Answer:

   router.prefetch() -> Option A

4. Quick Check:

   Prefetch method caches pages [OK]

Hint: Prefetch means load ahead to cache page [OK]

Common Mistakes:

• Using non-existent methods like router.load()
• Confusing fetch with prefetch
• Assuming cache() is a router method

3. Given this code snippet in a Next.js component:

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
  router.prefetch('/about');
  return <button onClick={() => router.push('/about')>Go to About</button>;
}

What happens when the user clicks the button?

medium

A. An error occurs because prefetch cannot be called inside the component

B. The /about page reloads from the server every time

C. The button does nothing because prefetch disables navigation

D. The /about page loads instantly from client cache

Solution

1. Step 1: Understand router.prefetch usage

   The code calls router.prefetch('/about') inside the component, which loads and caches the /about page on the client.

2. Step 2: Analyze button click behavior

   When clicking the button, router.push('/about') navigates to the cached page, making the load instant without server fetch.

3. Final Answer:

   The /about page loads instantly from client cache -> Option D

4. Quick Check:

   Prefetch + push = instant load [OK]

Hint: Prefetch before push means instant page load [OK]

Common Mistakes:

• Thinking prefetch disables navigation
• Assuming page reloads from server always
• Believing prefetch causes errors inside components

4. Identify the error in this Next.js code that tries to prefetch a page:

import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();

  function handleClick() {
    router.prefetch('/contact')
  }

  return <button onClick={handleClick}>Load Contact</button>;
}

medium

A. router.prefetch must be called outside event handlers

B. Missing semicolon after router.prefetch call causes syntax error

C. No error; code correctly prefetches on button click

D. useRouter cannot be used inside functional components

Solution

1. Step 1: Check router.prefetch usage

   Calling router.prefetch('/contact') inside an event handler is valid and triggers prefetch when the button is clicked.

2. Step 2: Verify syntax and hooks usage

   The code has correct syntax and useRouter is properly used inside the functional component.

3. Final Answer:

   No error; code correctly prefetches on button click -> Option C

4. Quick Check:

   Prefetch in event handler is valid [OK]

Hint: Prefetch can run inside event handlers safely [OK]

Common Mistakes:

• Thinking prefetch must run only on mount
• Assuming missing semicolon breaks code
• Believing useRouter is invalid in functional components

5. You want to improve user experience by preloading multiple pages on client side in Next.js. Which approach correctly prefetches pages for /about and /contact when the homepage loads?

hard

A. Call router.prefetch('/about') and router.prefetch('/contact') inside a useEffect hook with empty dependency array

B. Call router.prefetch('/about') and router.prefetch('/contact') directly in the component body

C. Call router.push('/about') and router.push('/contact') inside useEffect

D. Use getServerSideProps to prefetch pages on the server

Solution

1. Step 1: Understand prefetch timing

   Prefetching pages on client should happen after component mounts to avoid blocking rendering, so useEffect with empty dependencies is ideal.

2. Step 2: Avoid direct calls in component body or pushing pages

   Calling router.prefetch() directly in the component body runs on every render, which is inefficient. Using router.push() navigates instead of prefetching. getServerSideProps runs on server, not client cache.

3. Final Answer:

   Call router.prefetch('/about') and router.prefetch('/contact') inside a useEffect hook with empty dependency array -> Option A

4. Quick Check:

   Prefetch in useEffect = best practice [OK]

Hint: Prefetch pages inside useEffect to run once on mount [OK]

Common Mistakes:

• Prefetching directly in component body causing repeated calls
• Using router.push instead of prefetch
• Trying to prefetch on server side with getServerSideProps