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

Need a 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

Need a 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

Need a 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

Need a hint?

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