Router cache on client in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js router hook.

NextJS

import { [1] } from 'next/navigation';

Drag options to blanks, or click blank then click option'

ArouterHook

BuseRoute

CuseRouter

Drouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useRoute' which does not exist in Next.js.

Trying to import 'router' directly instead of the hook.

The correct hook to access the router in Next.js client components is useRouter.

2fill in blank

medium

Complete the code to get the current pathname from the router.

NextJS

const router = useRouter();
const currentPath = router.[1];

Drag options to blanks, or click blank then click option'

Apathname

Burl

Croute

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' which is not a property of the router object.

Using 'path' or 'route' which are incorrect property names.

The pathname property gives the current path in Next.js router.

3fill in blank

hard

Fix the error in the code to prefetch a route for caching.

NextJS

const router = useRouter();
router.[1]('/about');

Drag options to blanks, or click blank then click option'

Aprefetch

Bload

Ccache

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetch' which is a browser API, not a router method.

Using 'cache' or 'load' which do not exist on the router object.

The prefetch method tells Next.js to load the page in the background for faster navigation.

4fill in blank

hard

Fill both blanks to create a client component that prefetches the home route on mount.

NextJS

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function PrefetchHome() {
  const router = useRouter();
  useEffect(() => {
    router.[1]('[2]');
  }, []);
  return null;
}

Drag options to blanks, or click blank then click option'

Aprefetch

B/

C/home

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/home' instead of '/' which may not be the correct route.

Using 'fetch' instead of 'prefetch' causing runtime errors.

Use prefetch to load the '/' route on mount for caching.

5fill in blank

hard

Fill all three blanks to create a component that prefetches two routes and logs the current path.

NextJS

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function MultiPrefetch() {
  const router = useRouter();
  useEffect(() => {
    router.[1]('[2]');
    router.[3]('/contact');
    console.log('Current path:', router.pathname);
  }, []);
  return null;
}

Drag options to blanks, or click blank then click option'

Aprefetch

B/about

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'load' which is not a router method.

Mixing method names causing runtime errors.

Use prefetch to cache both '/about' and '/contact' routes on mount.

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