Caching Optimization Guide for Next.js and React Apps

Next.js has several cache layers: request memoisation, the data cache, the full route cache and the client router cache. Most caching bugs come from not knowing which layer is active or from caching personalised data.

What Caching measures

Check response headers, build output, server logs and the behaviour of a second request. If a page is fast on the first load but stale after an update, the issue is usually revalidation rather than raw speed.

The fixes that usually move the number

• Use revalidate for content that can be stale for a known period.
• Use revalidateTag or revalidatePath for on-demand updates.
• Mark authenticated or personalised routes as dynamic.
• Set Cache-Control deliberately at the CDN and origin.
• Do not cache secrets or user-specific responses in a shared layer.

Symptom, cause and fix

Symptom	Likely cause	What to do
Content is stale after an edit	No revalidation or a cached fetch	Add revalidatePath/revalidateTag and invalidate the CDN
User sees another user's data	Shared cache key or missing auth boundary	Make the route dynamic and scope the cache key
Slow every request	Everything is dynamic	Cache public data and stream personalised fragments
Different behaviour in dev	Dev mode bypasses some caching	Test against a production build

How to measure it properly

1. Map the layers. List which routes are static, dynamic, ISR or client-cached.
2. Inspect headers. Check Cache-Control, x-vercel-cache or your CDN's cache status.
3. Test a second request. Compare latency and body before and after an update.
4. Test invalidation. Edit content, trigger revalidation and confirm the change appears.
5. Test auth. Log in as two users and verify no cross-user leakage.

A practical example

// Revalidate a tag after a content change
import { revalidateTag } from "next/cache";
export async function updateProduct(id: string, data: ProductInput) {
await db.product.update({ where: { id }, data });
revalidateTag("products");
}

Common mistakes

• Caching a page that includes a logged-in user's name or balance.
• Assuming fetch caching is the same as full-route caching.
• Forgetting to invalidate the CDN after an origin revalidation.
• Using a very long revalidate for prices or stock.

A 30-day improvement plan

1. Week 1. Collect field data and pick the worst route. Write down the baseline.
2. Week 2. Fix the largest bottleneck and deploy behind a normal release.
3. Week 3. Test on a mid-range phone and a throttled connection; fix regressions.
4. Week 4. Compare field data, document the change and add a monitor or budget.

Field data vs lab data

Source	What it tells you	How to use it
Field data	What real users experienced	The source of truth for the metric
Lab test	A reproducible diagnosis	Find the cause and test a fix
Synthetic monitoring	Availability and regressions over time	Alert on a budget breach
RUM segmentation	Device, country and route differences	Target the worst segment
Server timing	Database, cache and render time	Separate backend from frontend

Set a performance budget

Budget	Example starting point	Why
LCP	2.5s or less at p75	The main content must appear quickly
INP	200ms or less at p75	Interactions must feel responsive
CLS	0.1 or less at p75	Layout movement erodes trust
JavaScript	A route-level KB budget	Prevents bundle creep
Images	Responsive sizes and modern formats	The largest common payload
Third-party scripts	A named owner and a cap	Uncontrolled tags are a common regression

Third-party script policy

• Every script needs an owner, a purpose and a review date.
• Load analytics and marketing tags after consent and after the main content.
• Prefer server-side events where they reduce client JavaScript.
• Test the checkout and sign-up with the full tag set enabled.
• Remove tags that no longer answer a business question.

Sources and further reading

• Next.js caching and revalidation (nextjs.org)
• Next.js self-hosting guide (nextjs.org)
• Web Vitals (web.dev)

Related reading

• Core Web Vitals guide
• Next.js performance checklist
• Performance optimisation service