Revalidation after mutation in NextJS - Performance & Optimization

Performance: Revalidation after mutation

MEDIUM IMPACT

This affects how quickly updated data appears on the page after a user changes it, impacting perceived responsiveness and freshness.

Updating data and showing fresh content immediately

NextJS

import { mutate } from 'swr';

async function handleUpdate() {
  await fetch('/api/update', { method: 'POST', body: JSON.stringify(data) });
  mutate('/api/data', updatedData, false);
}

Using mutate from SWR or React Query updates cache instantly without full re-fetch, enabling immediate UI update.

📈 Performance Gainnon-blocking UI update, reduces re-fetch latency by 100-300ms

Updating data and showing fresh content immediately

NextJS

async function handleUpdate() {
  await fetch('/api/update', { method: 'POST', body: JSON.stringify(data) });
  router.refresh();
}

Calling router.refresh() reloads the entire page data, causing a full re-fetch and blocking rendering until complete.

📉 Performance Costblocks rendering for 200-500ms depending on data size and network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full router.refresh() after mutation	High (full page data reload)	Multiple reflows due to layout recalculation	High paint cost due to full content update	[X] Bad
Cache mutation with mutate() after mutation	Low (only updated nodes)	Single reflow or none	Low paint cost with partial update	[OK] Good

Rendering Pipeline

After mutation, the browser either triggers a full data re-fetch causing layout recalculation and paint delays, or updates cache directly allowing fast paint without layout thrashing.

→Data Fetch

→Layout

→Paint

→Composite

⚠️ BottleneckData Fetch and Layout when full revalidation occurs

Core Web Vital Affected

INP

This affects how quickly updated data appears on the page after a user changes it, impacting perceived responsiveness and freshness.

Optimization Tips

1Avoid full page refreshes after data mutation to reduce blocking rendering.

2Use cache mutation methods like mutate() to update UI instantly.

3Monitor revalidation impact on interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance drawback of calling router.refresh() after a data mutation in Next.js?

A It triggers a full page data re-fetch causing blocking rendering.

B It skips updating the UI causing stale data display.

C It only updates local cache without network request.

D It reduces bundle size but increases CPU usage.

DevTools: Performance

How to check: Record a profile while performing the mutation and revalidation. Look for long tasks and layout shifts after mutation.

What to look for: Long blocking times and multiple reflows indicate bad pattern; quick paint with minimal layout changes indicates good pattern.