Revalidation after mutation in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens after calling a server action that mutates data with revalidation?

Consider a Next.js server action that updates a database and triggers revalidation of a page. What will the user see immediately after the mutation completes?

NextJS

export async function updateData() {
  // mutation logic
  await revalidatePath('/dashboard');
}

export default function Dashboard() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return <div>{data?.message}</div>;
}

A The page reloads fully in the browser to show updated data after mutation.

B The page shows stale data until the user manually refreshes the browser.

C The page immediately shows updated data without a full reload because revalidation updates the cache.

D The page shows an error because revalidation cannot be triggered from server actions.

💡 Hint

Think about how Next.js cache and revalidation work with server actions.

Revalidation updates server cache but does not automatically trigger client-side fetches or state updates. The client component must refetch or be remounted to update.

📝 Syntax

intermediate

Which code snippet correctly triggers revalidation after a mutation in Next.js?

You want to update user info and then revalidate the profile page. Which code correctly calls revalidation after mutation?

A

await updateUser();
await revalidateTag('profile');

B

await updateUser();
revalidatePath('/profile');

C

updateUser();
await revalidatePath('/profile');

D

await updateUser();
await revalidatePath('/profile');

💡 Hint

Remember to await both mutation and revalidation calls.

Both updateUser and revalidatePath are async and must be awaited to ensure mutation finishes before revalidation triggers.

🔧 Debug

advanced

Why does revalidation not update the page after mutation?

You call revalidatePath('/home') after a mutation, but the page still shows old data. What is the most likely cause?

NextJS

export async function updateItem() {
  await mutateDatabase();
  // missing revalidation call
}

export default function Home() {
  const data = fetchData();
  return <div>{data.title}</div>;
}

A Next.js does not support revalidation after mutations.

B The fetchData function caches data and ignores revalidation.

C You forgot to call revalidatePath('/home') after mutation.

D The mutation function mutateDatabase is not awaited.

💡 Hint

Check if revalidation is triggered after mutation.

Without calling revalidatePath, Next.js does not refresh the cached data, so the page shows stale content.

🧠 Conceptual

advanced

What is the effect of revalidateTag compared to revalidatePath in Next.js?

You have a page that uses a cache tag 'profile'. What happens if you call revalidateTag('profile') after a mutation instead of revalidatePath('/profile')?

A revalidateTag invalidates all cached data with that tag, updating multiple pages if tagged.

B revalidateTag causes a full browser reload of the page using that tag.

C revalidateTag only updates the single page at '/profile' and no others.

D revalidateTag is deprecated and has no effect in Next.js 14.

💡 Hint

Think about cache tagging and how it groups data.

revalidateTag invalidates all cache entries with the given tag, so multiple pages or components sharing that tag get updated.

❓ state_output

expert

What is the state of a client component after a server action triggers revalidation?

A client component fetches data from a server component. After a server action mutates data and calls revalidatePath, what happens to the client component's state?

NextJS

export default function ClientComponent() {
  const [message, setMessage] = React.useState('Loading...');
  React.useEffect(() => {
    fetch('/api/message').then(res => res.json()).then(data => setMessage(data.text));
  }, []);
  return <p>{message}</p>;
}

// Server action calls revalidatePath('/client') after mutation

A The client component state remains unchanged until the user refreshes the page.

B The client component fetches fresh data automatically and updates its state.

C The client component throws an error because revalidation affects server components only.

D The client component resets its state to the initial 'Loading...' message.

💡 Hint

Consider how client components fetch data and how revalidation affects server cache.

Revalidation updates server cache but does not automatically trigger client-side fetches or state updates. The client component must refetch or be remounted to update.

Practice

1. What is the main purpose of revalidation after mutation in Next.js App Router?

easy

A. To update the page data after a change so the UI shows fresh information

B. To prevent any data changes from being saved

C. To reload the entire website from scratch

D. To disable user interactions temporarily

Solution

1. Step 1: Understand mutation effect

   When data changes (mutation), the UI might show old data if not updated.

2. Step 2: Purpose of revalidation

   Revalidation reloads or refreshes data so the UI reflects the latest changes.

3. Final Answer:

   To update the page data after a change so the UI shows fresh information -> Option A

4. Quick Check:

   Revalidation updates data = A [OK]

Hint: Revalidation means refreshing data after changes [OK]

Common Mistakes:

• Thinking revalidation stops data saving
• Confusing revalidation with full page reload
• Believing it disables user actions

2. Which Next.js App Router method is used to trigger revalidation after a mutation?

easy

A. router.replace()

B. router.reload()

C. router.push()

D. router.refresh()

Solution

1. Step 1: Identify method for revalidation

   Next.js App Router provides router.refresh() to reload data without full page reload.

2. Step 2: Differentiate from other methods

   router.reload() reloads whole page, router.push() and router.replace() change routes.

3. Final Answer:

   router.refresh() -> Option D

4. Quick Check:

   Revalidation uses router.refresh() = A [OK]

Hint: Use router.refresh() to reload data after mutation [OK]

Common Mistakes:

• Using router.reload() which reloads full page
• Confusing route navigation methods with revalidation
• Trying to use router.replace() for data refresh

3. Given this code snippet in a Next.js component:

import { useRouter } from 'next/navigation';

export default function UpdateButton() {
  const router = useRouter();

  async function handleClick() {
    await fetch('/api/update', { method: 'POST' });
    router.refresh();
  }

  return Update;
}

What happens when the button is clicked?

medium

A. The API is called, then the page data refreshes without full reload

B. Nothing happens because router.refresh() is incorrect

C. The page reloads completely, losing state

D. The button click causes a navigation to /api/update

Solution

1. Step 1: Analyze handleClick function

   It calls the API with POST, then calls router.refresh() to reload data.

2. Step 2: Understand router.refresh() effect

   This refreshes the current route's data without a full page reload or navigation.

3. Final Answer:

   The API is called, then the page data refreshes without full reload -> Option A

4. Quick Check:

   API call + router.refresh() updates data = C [OK]

Hint: router.refresh() updates data without full reload [OK]

Common Mistakes:

• Thinking router.refresh() reloads entire page
• Assuming router.refresh() navigates to API route
• Believing nothing happens due to syntax error

4. Identify the error in this Next.js code snippet that tries to revalidate after mutation:

import { useRouter } from 'next/navigation';

export default function DeleteButton() {
  const router = useRouter;

  async function handleDelete() {
    await fetch('/api/delete', { method: 'DELETE' });
    router.refresh();
  }

  return Delete;
}

medium

A. Button onClick should be onSubmit

B. fetch method DELETE is invalid in Next.js

C. router is not called as a function, so router.refresh() fails

D. handleDelete should not be async

Solution

1. Step 1: Check router initialization

   Code uses const router = useRouter; missing parentheses, so router is a function reference, not the router object.

2. Step 2: Effect on router.refresh()

   Calling router.refresh() fails because router is not an object but a function reference.

3. Final Answer:

   router is not called as a function, so router.refresh() fails -> Option C

4. Quick Check:

   useRouter missing () causes error = D [OK]

Hint: Always call useRouter() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses on useRouter()
• Thinking DELETE method is invalid
• Confusing onClick with onSubmit

5. You have a Next.js page showing a list of items fetched from the server. After adding a new item via a mutation API call, you want the list to update automatically. Which approach correctly ensures the list refreshes with the new data without a full page reload?

hard

A. Call router.push('/current-page') after mutation to reload the page

B. Call router.refresh() after mutation to revalidate and update data

C. Reload the browser window with window.location.reload()

D. Do nothing; the list updates automatically without any code

Solution

1. Step 1: Understand goal

   After mutation, the UI must show updated list without full reload or navigation.

2. Step 2: Evaluate options

   router.push('/current-page') navigates and reloads route, window.location.reload() reloads full page, and doing nothing won't update data.

3. Step 3: Correct method

   router.refresh() triggers Next.js to revalidate data and update UI efficiently.

4. Final Answer:

   Call router.refresh() after mutation to revalidate and update data -> Option B

5. Quick Check:

   Use router.refresh() to update data after mutation = B [OK]

Hint: Use router.refresh() to update data without full reload [OK]

Common Mistakes:

• Using router.push() causing unnecessary navigation
• Reloading full page losing state
• Assuming UI updates automatically without refresh