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.