Opting out of caching in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when opting out of caching in a Next.js Server Component?

Consider a Next.js Server Component that fetches data but opts out of caching using export const revalidate = 0;. What happens when you refresh the page multiple times?

NextJS

export const revalidate = 0;

export default async function Page() {
  const time = new Date().toISOString();
  return <p>Current time: {time}</p>;
}

A The time updates on every refresh because caching is disabled.

B The time stays the same on every refresh because data is cached indefinitely.

C The page throws an error because revalidate cannot be zero.

D The time updates only once per minute due to default caching.

💡 Hint

Think about what setting revalidate = 0 means for data fetching in Next.js.

Setting revalidate = 0 disables caching, so the data is fetched fresh on every request, updating the time each refresh.

📝 Syntax

intermediate

Which code snippet correctly opts out of caching in Next.js 14+?

Choose the correct way to disable caching for a Next.js Server Component.

A export const cache = false;

B export const noCache = true;

C export const revalidate = false;

D export const revalidate = 0;

💡 Hint

Look for the official Next.js export that controls cache revalidation timing.

Next.js uses export const revalidate = 0; to disable caching and fetch fresh data on every request.

🔧 Debug

advanced

Why does this Next.js page still cache data despite setting revalidate to 0?

Review the code below. The developer expects no caching, but the page shows stale data on refresh. What is the likely cause?

NextJS

export const revalidate = 0;

export default async function Page() {
  const data = await fetch('https://api.example.com/data', { cache: 'force-cache' }).then(res => res.json());
  return <p>{data.message}</p>;
}

A The fetch uses <code>cache: 'force-cache'</code> which overrides revalidate and caches the response.

B The revalidate export must be a function, not a number.

C The API endpoint is down, causing stale data to appear.

D Next.js ignores revalidate when fetch is used inside Server Components.

💡 Hint

Check the fetch options and how they interact with Next.js caching.

Using cache: 'force-cache' in fetch forces caching, ignoring revalidate. To opt out, use cache: 'no-store' or omit caching options.

🧠 Conceptual

advanced

What is the effect of export const dynamic = 'force-dynamic' in Next.js?

In Next.js 14+, what does setting export const dynamic = 'force-dynamic' do for a page or layout?

A It caches the page for 10 seconds before revalidating.

B It forces the page to be rendered dynamically on every request, disabling static caching.

C It disables the page from rendering on the server and forces client-side rendering.

D It forces the page to be statically generated at build time.

💡 Hint

Consider how dynamic rendering differs from static generation.

Setting dynamic = 'force-dynamic' tells Next.js to always render the page on the server at request time, bypassing static caching.

❓ state_output

expert

What is the rendered output of this Next.js Server Component with caching disabled and a client component inside?

Analyze the code below. What will the user see when the page loads and after clicking the button?

NextJS

export const revalidate = 0;

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

function ClientCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function Page() {
  const time = new Date().toISOString();
  return (
    <>
      <p>Server time: {time}</p>
      <ClientCounter />
    </>
  );
}

A The server time never updates on refresh, and the button does not increment the count.

B The page shows an error because client components cannot be used inside server components with revalidate set to 0.

C The page shows the current server time that updates on every refresh, and the button increments count on clicks without refreshing the time.

D The button increments count but the server time also updates on every click.

💡 Hint

Think about how server and client components behave together and how caching affects server-rendered data.

The server time updates on every page load because caching is disabled. The client component manages its own state and updates count on clicks without affecting the server time.