Full route cache in NextJS - Mini Project: Build & Apply

Full Route Cache in Next.js

📖 Scenario: You are building a Next.js app that shows a list of blog posts. To make the app faster and reduce server load, you want to cache the entire route so that repeated visits load instantly without fetching data again.

🎯 Goal: Create a Next.js route that fetches blog posts data and caches the full page output using Next.js caching features.

📋 What You'll Learn

Create a data array of blog posts with exact titles and ids

Add a cache configuration variable to control caching duration

Fetch and render the blog posts using Next.js server component with caching

Export the page component with full route caching enabled

💡 Why This Matters

🌍 Real World

Caching full routes in Next.js improves page load speed and reduces server load, making websites faster and more scalable.

💼 Career

Understanding route caching is important for frontend developers working with Next.js to optimize performance and user experience.

1

Create the blog posts data array

Create a constant called posts that is an array of objects. Each object must have id and title properties with these exact values: { id: 1, title: 'Next.js Basics' }, { id: 2, title: 'React Hooks' }, and { id: 3, title: 'Full Route Cache' }.

NextJS

// Create the posts array with the exact objects
// Your code here

Hint

Use const posts = [ ... ] with three objects inside.

2

Add cache duration configuration

Add a constant called cacheDuration and set it to 60 to represent cache time in seconds.

NextJS

const posts = [
  { id: 1, title: 'Next.js Basics' },
  { id: 2, title: 'React Hooks' },
  { id: 3, title: 'Full Route Cache' }
];

// Define cacheDuration in seconds
// Your code here

Hint

Use const cacheDuration = 60; to set cache time.

3

Create the page component with cached data fetching

Create an async function called Page that returns JSX. Inside it, simulate fetching posts by using the posts array. Use cacheDuration to set caching by importing cache from react and wrapping the data fetching logic with it. Render an unordered list <ul> with each post's title inside a <li>.

NextJS

const posts = [
  { id: 1, title: 'Next.js Basics' },
  { id: 2, title: 'React Hooks' },
  { id: 3, title: 'Full Route Cache' }
];

const cacheDuration = 60;

// Import cache from react
// Create async function Page with cached data fetching
// Render posts in  with  for each title
// Your code here

Hint

Use cache from react to wrap the posts fetching function with maxAge set to cacheDuration * 1000 milliseconds.

4

Enable full route caching export

Add an export called revalidate and set it to the value of cacheDuration to enable Next.js full route caching for this page.

NextJS

import { cache } from 'react';

const posts = [
  { id: 1, title: 'Next.js Basics' },
  { id: 2, title: 'React Hooks' },
  { id: 3, title: 'Full Route Cache' }
];

const cacheDuration = 60;

const fetchPosts = cache(() => {
  return posts;
}, { maxAge: cacheDuration * 1000 });

export default async function Page() {
  const data = fetchPosts();
  return (
    
      {data.map(post => (
        {post.title}
      ))}
    
  );
}

// Export revalidate to enable full route caching
// Your code here

Hint

Use export const revalidate = cacheDuration; to enable route caching.

Practice

1. What does enabling full route cache in Next.js do for your page?

easy

A. It saves the entire page output to serve faster on next visits.

B. It disables all caching and forces server rendering every time.

C. It only caches API responses but not the page content.

D. It caches only images and static assets, not HTML.

Solution

1. Step 1: Understand full route cache purpose

   Full route cache stores the whole rendered page output to speed up loading.

2. Step 2: Compare options with this purpose

   Only "It saves the entire page output to serve faster on next visits." describes saving entire page output for faster serving.

3. Final Answer:

   It saves the entire page output to serve faster on next visits. -> Option A

4. Quick Check:

   Full route cache = saves full page output [OK]

Hint: Full route cache means caching the whole page output [OK]

Common Mistakes:

• Thinking it only caches API data
• Confusing with disabling cache
• Assuming it caches only images

2. Which code snippet correctly enables full route cache in a Next.js page component?

easy

A. export const cache = 'no-cache';

B. export const revalidate = 0;

C. export const dynamic = 'force-static';

D. export const dynamic = 'force-dynamic';

Solution

1. Step 1: Recall syntax for full route cache

   Next.js uses export const dynamic = 'force-static' to enable full route cache.

2. Step 2: Check each option

   Only "export const dynamic = 'force-static';" matches the correct syntax for full route cache.

3. Final Answer:

   export const dynamic = 'force-static'; -> Option C

4. Quick Check:

   Full route cache syntax = dynamic = 'force-static' [OK]

Hint: Use dynamic = 'force-static' to enable full route cache [OK]

Common Mistakes:

• Using 'force-dynamic' instead of 'force-static'
• Confusing cache control with dynamic export
• Setting revalidate to 0 disables caching differently

3. Given this Next.js page code, what will be the caching behavior?

export const dynamic = 'force-static';
export default function Page() {
  return <h1>Hello World</h1>;
}

medium

A. The page caches only API data but renders HTML dynamically.

B. The page is server rendered on every request without caching.

C. The page disables caching and reloads data on each visit.

D. The page is fully cached and served statically on all requests.

Solution

1. Step 1: Analyze the dynamic export value

   The code sets dynamic = 'force-static', which enables full static caching.

2. Step 2: Understand effect on page rendering

   This means the page HTML is cached fully and served statically on all requests.

3. Final Answer:

   The page is fully cached and served statically on all requests. -> Option D

4. Quick Check:

   dynamic = 'force-static' means full static cache [OK]

Hint: dynamic = 'force-static' means full static cache [OK]

Common Mistakes:

• Thinking it disables caching
• Assuming partial caching of API only
• Confusing with dynamic rendering

4. Identify the error in this Next.js page that tries to enable full route cache:

export const dynamic = 'force-static'

export default function Page() {
  return <div>Cached Page</div>;
}

medium

A. Missing semicolon after dynamic export causes syntax error.

B. No error; code correctly enables full route cache.

C. Page component must be async to enable caching.

D. Using 'force-static' is invalid; should be 'force-dynamic'.

Solution

1. Step 1: Check syntax correctness

   JavaScript allows omitting semicolons; no syntax error here.

2. Step 2: Verify caching value and component

   'force-static' is valid to enable full route cache; component can be normal function.

3. Final Answer:

   No error; code correctly enables full route cache. -> Option B

4. Quick Check:

   Code syntax and caching value are correct [OK]

Hint: Semicolons optional; 'force-static' is valid caching value [OK]

Common Mistakes:

• Assuming missing semicolon causes error
• Confusing 'force-static' with 'force-dynamic'
• Thinking component must be async

5. You want to optimize a mostly static blog page with some dynamic widgets. Which approach best uses full route cache in Next.js?

hard

A. Set export const dynamic = 'force-static' and load widgets client-side only.

B. Use dynamic = 'force-dynamic' to cache the whole page including widgets.

C. Disable caching and fetch all data server-side on every request.

D. Use revalidate = 0 to cache page but update widgets dynamically.

Solution

1. Step 1: Understand full route cache use case

   Full route cache works best for mostly static pages to serve fast.

2. Step 2: Handle dynamic widgets separately

   Loading widgets client-side keeps page static cache intact while showing dynamic content.

3. Step 3: Evaluate options

   Set export const dynamic = 'force-static' and load widgets client-side only. matches this approach; others either disable caching or cache dynamic parts incorrectly.

4. Final Answer:

   Set export const dynamic = 'force-static' and load widgets client-side only. -> Option A

5. Quick Check:

   Static page + client widgets = dynamic = 'force-static' [OK]

Hint: Cache static page, load dynamic parts client-side [OK]

Common Mistakes:

• Caching dynamic widgets server-side causing stale data
• Disabling cache unnecessarily
• Using force-dynamic which disables full route cache