Server component rerender full page after revalidate tag

[popuguytheparrot]

Summary

This is example how on refresh rerender in react dev tools whole page
https://codesandbox.io/p/devbox/eager-proskuriakova-mq2pyk

I expect will rerender only List in Suspense with fallback loading

Additional information

No response

Example

No response

[Unsleeping]

If I have a server component RSC Parent (entry point page.tsx) in the app-dir which contains another server component - RSC Child with its own data fetching using a tag (this tag is unique to it), and I then revalidate this tag, why does the whole page (the entire entry point) get returned to me? I was expecting the RSC payload to include only the current component. Is this a limitation related to the inability of RSC to handle re-renders? Or is it something wrong with Next.js, where they can't update just the child server component?

As a solution, I've currently decided to move the UI update from cache revalidation to CSR, but maybe I'm missing something and there's a way to revalidate a specific child without refreshing the entire page? Refreshing the whole page is not suitable because there is a socket connection, and reconnecting due to an update of a component unrelated to the socket is unnecessary.

Is it normal for the revalidation of a tag in a child to trigger the re-streaming of the entire page? In my understanding, revalidating a field in the Data Cache by a specific tag should provide me with on-demand rebuilding of the necessary server component, its subsequent streaming, and mounting using React and the RSC payload instructions that come after revalidation.

I tried various compositions, removed unnecessary props being passed from the RSC Parent to the RSC Child, disabling some application functionality as an experiment. I tried wrapping the RSC Child in <Suspense/>, and I tried calling router.refresh from a client component – the result is the same: I get a full reload of the entry page and a socket reconnect.

https://codesandbox.io/p/devbox/eager-proskuriakova-forked-3v5nwp
RSC Parent + RSC Child + RevalidationBtn + FakeSocket + RouterRefreshBtn

In this example, we have the main entry point page, RSC Parent. Within its tree, there's RSC Child, which fetches a dummy API with movies and displays their titles, with the fetch using the tag: "movies".

There are two buttons: one for revalidating the "movies" tag and another for triggering a refresh, which according to the documentation should work as follows: "Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position)."

Instead of a real socket, there's a client component with an effect: it logs "connect" when mounted and "disconnect" when unmounted.

Both tag revalidation and route refresh will remount the client component.

<Suspense> doesn't help neither here:
https://codesandbox.io/p/devbox/eager-proskuriakova-forked-27z7vg
RSC Parent + RSC Child wrapped in Suspense + RevalidationBtn + FakeSocket + RouterRefreshBtn

[Unsleeping]

I also tried to pass <FakeSocket/> as a slot - either as a prop or as children of the component - the entry point of the page, for example: https://codesandbox.io/p/devbox/215323525-23jtkk

In addition to that, I tried specifying an immutable key for <Suspense/> - the result is the same, I get a full page refresh.

[Unsleeping]

I also tried putting <FakeSocket/> in the layout of the page (entry page). Revalidation of the RSC Child of this page triggers a full render of the page and the layout.

https://codesandbox.io/p/devbox/layout-socket-fyhhtf

[Unsleeping]

I did a bit of researching of the Next.js source code, deployed it locally, and added a project from the examples provided above (thanks to the Next.js developers for making a clear guide on how to set it all up). I searched for references related to revalidation for the entry point since the monorepository is HUGE. I set a breakpoint, navigated through the call stack, found the approximate place where the component tree for the entire page is generated, and started reading the code.

Research:

1. Jump to the action-handler source code and see that when we trigger revalidation (via a server action to revalidate a tag from the Data Cache), generateFlight() is called. We notice that there is even a parameter for skipFlight, but more on that later.

2. Jump to the generateFlight source code and see a wonderful comment stating that this function is ONLY used during client-side navigation:

Handle Flight render request. This is only used when client-side navigating. E.g. when you router.push('/dashboard') or router.reload().

Okay, interesting that I have client-side navigation during tag revalidation. I conclude that this is purely a limitation of the current implementation of Next.js's app-render. By the way, I tried passing skipFlight: true just for experiments. The page still recompiled.

[Unsleeping]

still no answer

[ClemCa]

I stumbled upon this discussion after noticing this behavior too. I spent a moment with the react profiler trying to figure out why things re-rendered from the router down after a flag revalidation, no idea why next does this.

[Unsleeping]

Maybe there is the answer: https://nextjs.org/docs/app/building-your-application/caching#invalidation-1

There are two ways you can invalidate the Router Cache:

1. In a Server Action
   Revalidating data on-demand by path with (revalidatePath) or by cache tag with (revalidateTag)
   ...

[ClemCa]

You'd expect that to only invalidate components, not the entire tree, that's what's weird with that. It's the only case when we see this behavior, a potential loss of state you can't prevent without external state management.

[binhtran93]

This is a serious issue for me since we use a modal for update, when invalidate tag, the page is refreshed, and close my modal

[binhtran93]

Still no answer? I feel regret about using NextJs. The way they go silent and keep releasing other new features is so making me mad

[WebDevTrop]

Also facing this issue.

[NeilRiver]

Dan Abramov apparently also went through the wrong door (reference to Kirkorov)

[GuysmoB]

I'm also facing this problem. In the root layout, my code is wrapped in a context where i have a userCtx that is used everywhere in my app.
If a do a mutation follow by a revalidatePath/Tag, the root layout is rerender, so the main context is update and everything depending on the userCtx is re render.

The solution should be to fetch the user by tag on each page , by passing the userCtx from the context but that's mean I have to propagate the user props every where i need it.

Second solution should be to use React Query ....

[mohammad-k13]

When you revalidate a cache tag in a child server component, the entire page gets rebuilt and sent back to the client. This happens because Next.js ties cache invalidation to the route level, so any revalidation within a route triggers the regeneration of the whole tree associated with that route, starting from the entry point. Server components don't yet support updating just a specific part of the tree; they work with the entire route as a unit.
Your decision to move updates to the client side works because it isolates updates to the child component without involving the server. This way, the parent remains untouched, preventing unnecessary remounts and keeping your socket connection alive.

Wrapping the child in Suspense doesn’t help because the issue lies in how Next.js handles revalidation at the route level. Server-side updates lack the granularity needed to target just the child component, which is why the full page gets refreshed.

For now, managing updates on the client side is the best approach. It allows for finer control and avoids disrupting unrelated parts of your application. As Next.js evolves, we might see better support for targeted updates in server components.

[unobatbayar]

Also facing the same issue.

[jimmysafe]

same issue here, on server function tag revalidation i get other server components in the same page revalidated as well.

[larbisahli]

I encountered a full-page reload issue when using revalidateTag() in my Next.js App Router.

🔹 Setup:
In my app/dashboard/layout.tsx, I had:

return <Search>....</Search>;

where Search.jsx is wrapped in memo(Search).

🔴 Problem:

• With memo(Search) → Calling revalidateTag() triggers a full page reload.
• Without memo(Search) → The page updates normally without a reload.

🔍 Why This Happens:

• memo(Search) prevents unnecessary re-renders unless its props change.
• Next.js revalidates at the route level when revalidateTag() is used. If Search is memoized, it blocks updates from propagating properly, causing Next.js to force a reload.
• Memoization interferes with Next.js’s caching system, making it treat the component as static, leading to a full refresh instead of partial updates.

When memo(Search) is used:

• The Search component does not re-render unless its props change.
• revalidateTag() updates the cache, but since memo(Search) blocks React from detecting changes, Next.js forces a full page reload to ensure fresh data.

🚀 Solution: Avoid memoizing layout components that depend on revalidateTag() updates.

[unobatbayar]

Fixed by creating using App Router.

src/app/api/revalidate/route.ts

import { revalidateTag } from "next/cache";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const { tags } = await req.json();

    if (!tags || !Array.isArray(tags)) {
      return NextResponse.json({ error: "Invalid tags format" }, { status: 400 });
    }

    tags.forEach((tag) => revalidateTag(tag));

    return NextResponse.json({ success: true });
  } catch (error) {
    return NextResponse.json({ error: "Failed to revalidate" }, { status: 500 });
  }

then calling it using fetch

  const revalidateTags = async () => {
    fetch(`/api/revalidate`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        tags: [`tag`, `another_tag`],
      }),
    });
  };

[Unsleeping]

you just unwrapped server action (function)
seems to be unrelated to this question

[unobatbayar]

Sorry...

It's just what I've done to prevent rerender from revalidation in my Nextjs app.

[Unsleeping]

thank you for the interesting idea and your investigation. I have one question:
are the tags you’re revalidating connected to your RSC child, which you tried to prevent from re-rendering? Or are these tags related to some other cache in Next.js that you're just revalidating on this page?

[unobatbayar]

@Unsleeping

Thank you,

These are unstable_cache tags which used for caching GraphQL query results in my case.

[seeARMS]

I just ran into this odd functionality. I have a modal open and when a user changes a setting, we persist the setting to the db and revalidate a tag. The tag is not used on this current page -- it's used on completely unrelated fetches. The revalidateTag call was closing the modal since the entire page got refreshed.

The workaround solution for me was to not use a server action to perform the revalidateTag, but instead use a route handler: https://nextjs.org/docs/app/api-reference/functions/revalidateTag#route-handler

This appears to revalidate successfully and does not close the modal.