Opting out of caching in NextJS - Mini Project: Build & Apply

Opting Out of Caching in Next.js

📖 Scenario: You are building a Next.js app that shows the current time on a page. You want to make sure the page always shows the latest time and does not use any cached version.

🎯 Goal: Create a Next.js server component page that displays the current time and opts out of caching so it updates on every request.

📋 What You'll Learn

Create a server component page file named page.tsx

Use the revalidate = 0 cache option to disable caching

Display the current time using new Date().toLocaleTimeString()

Export a default async function named Page that returns the JSX

💡 Why This Matters

🌍 Real World

Web apps often need to show live or frequently changing data, like stock prices or current time, where caching must be disabled to keep data fresh.

💼 Career

Understanding how to control caching in Next.js is important for building performant and accurate web applications that meet user expectations.

1

Create the page component file

Create a file named page.tsx and write an async function named Page that returns a simple JSX element with the text Current time: inside a <div>.

NextJS

// Your code here

Need a hint?

Start by creating the basic page component that returns a div with the text 'Current time:'.

2

Add the revalidate = 0 cache option

Add the line export const revalidate = 0; at the top of page.tsx to disable caching and force the page to update on every request.

NextJS

export default async function Page() {
  return Current time:;
}
// Add the revalidate export above

Need a hint?

Use export const revalidate = 0; to opt out of caching in Next.js.

3

Display the current time dynamically

Inside the Page function, create a variable named currentTime and set it to new Date().toLocaleTimeString(). Then update the JSX to display Current time: {currentTime} inside the <div>.

NextJS

export const revalidate = 0;

export default async function Page() {
  // Your code here
}

Need a hint?

Use JavaScript's new Date().toLocaleTimeString() to get the current time and show it in the JSX.

4

Complete the page with no caching

Ensure the file page.tsx exports revalidate = 0 and the default async function Page that returns the current time inside a <div>. This setup disables caching and shows the live time on every request.

NextJS

export const revalidate = 0;

export default async function Page() {
  const currentTime = new Date().toLocaleTimeString();
  return Current time: {currentTime};
}
// Verify the export and function are correct

Need a hint?

Double-check that the revalidate export and the Page function are correctly defined to disable caching.