Revalidation after mutation in NextJS - Step-by-Step Execution

Concept Flow - Revalidation after mutation

User triggers mutation

↓

Mutation function runs

↓

Data changes on server

↓

Trigger revalidation

↓

Next.js fetches fresh data

↓

Page updates with new data

↓

Done

This flow shows how after changing data (mutation), Next.js re-fetches fresh data to update the page.

Execution Sample

NextJS

async function updateData() {
  await mutate('/api/data', async () => {
    await fetch('/api/data', { method: 'POST' });
    return fetch('/api/data').then(res => res.json());
  }, { revalidate: true });
}

This code updates data on the server and then revalidates the cache to update the page.

Execution Table

Step	Action	Server Data State	Cache State	Page State
1	User triggers updateData()	Original data	Cached original data	Page shows original data
2	POST request sent to /api/data	Data updated on server	Cached original data	Page shows original data
3	Fetch fresh data after POST	Data updated on server	Cache updated with fresh data	Page shows fresh data
4	Revalidation triggered	Data updated on server	Cache updated with fresh data	Page shows fresh data
5	Done	Data updated on server	Cache fresh	Page shows updated data

💡 Revalidation completes, cache and page show updated data

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
Server Data	Original data	Updated data	Updated data	Updated data	Updated data
Cache	Original data	Original data	Fresh data	Fresh data	Fresh data
Page	Shows original data	Shows original data	Shows fresh data	Shows fresh data	Shows fresh data

Key Moments - 2 Insights

Why does the page still show old data right after the POST request?

Because the cache is not updated immediately after the POST; it updates after fetching fresh data (see Step 2 and 3 in execution_table).

What triggers the page to update with new data?

The revalidation process updates the cache with fresh data, which causes the page to re-render with updated content (see Step 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is the cache state right after the POST request (Step 2)?

A Cache has fresh updated data

B Cache still has original data

C Cache is empty

D Cache has corrupted data

💡 Hint

Check the 'Cache State' column at Step 2 in execution_table

At which step does the page start showing the updated data?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at the 'Page State' column in execution_table

If revalidate option was false, what would happen to the page state after mutation?

A Page would never update automatically

B Page would show an error

C Page would update immediately

D Page would reload the whole app

💡 Hint

Think about the role of revalidation in updating cache and page

Concept Snapshot

Revalidation after mutation in Next.js:
- Mutation changes data on server
- Cache still holds old data initially
- Revalidation fetches fresh data
- Cache updates with fresh data
- Page re-renders showing updated content
Use mutate() with { revalidate: true } to trigger this flow.

Full Transcript

In Next.js, when you change data on the server using a mutation, the page does not update immediately because the cached data is still the old version. After the mutation, Next.js triggers a revalidation process that fetches fresh data from the server and updates the cache. Once the cache updates, the page re-renders to show the new data. This process ensures the user sees the latest information without a full page reload. Using the mutate function with the revalidate option set to true controls this behavior.

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