Link and Image components rerendered when interacting with another client components (build only)

[robertPKO]

Link to the code that reproduces this issue

https://github.com/robertPKO/reproduce-rerender-issue

To Reproduce

1. start the application with next build then next start.
2. use react dev tool to watch for component rerender
3. as the reviews change, the Link will be rerendered, which does not occur in dev mode

Current vs. Expected behavior

Currently: Component is rerendered when another client component is interacted in the browser in build mode

header.tsx

client-reviews.tsx

layout.tsx

page.tsx

Expected: Link should stay static when other client component is interected (works in dev mode)

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 16088
  Available CPU cores: 12
Binaries:
  Node: 21.7.3
  npm: 10.9.0
  Yarn: N/A
  pnpm: 10.7.1
Relevant Packages:
  next: 15.3.3 // Latest available version is detected (15.3.3).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Performance, Image (next/image), Linking and Navigating

Which stage(s) are affected? (Select all that apply)

next build (local), next start (local), Vercel (Deployed)

Additional context

Links (and Images) are rerended on build mode ( when another client component is interacting. Doesn't happen in dev mode (npm run dev).

When I use normal link , it doesnt rerender

[Ibra-cesar]

I think the issues is that in builds next and react use the StrictMode and RSC(react server component).

When client-reviews.tsx which is a client component is mount or update it will render all the parts of it that part of the same render boundary even if the header.tsx is a server component.

So when react do hydration or re render on the client, it may re render parts of both header.tsx and client-review.tsx, solution is i think try to memoize it or just isolate one of them.

And also in next app router both Link and Image that in server component is re render for hydration purposes.

So the re render means that each node in the DOM are being evaluated during hydration.

And the re render doesn't mean your server side logic(if any) being re runs.

And also both Image and Link it self is internally build as a client component so it needs to re render if the parent tree updates.

is this a bug? No.
is it weird? Yes.

but it makes sense because the Image and Link rely on both routing and Image optimization.

:)

[icyJoseph]

Most likely duplicate: #80464

[robertPKO]

I think the issues is that in builds next and react use the StrictMode and RSC(react server component).

When client-reviews.tsx which is a client component is mount or update it will render all the parts of it that part of the same render boundary even if the header.tsx is a server component.

So when react do hydration or re render on the client, it may re render parts of both header.tsx and client-review.tsx, solution is i think try to memoize it or just isolate one of them.

And also in next app router both Link and Image that in server component is re render for hydration purposes.

So the re render means that each node in the DOM are being evaluated during hydration.

And the re render doesn't mean your server side logic(if any) being re runs.

And also both Image and Link it self is internally build as a client component so it needs to re render if the parent tree updates.

is this a bug? No. is it weird? Yes.

but it makes sense because the Image and Link rely on both routing and Image optimization.

:)

Thank you for the reply. We have tried different approach using memo on them, or change the way the animation is run, it still resulted as a rerender.

So I think it is like what you mentioned, it's being re-evaluated during hydration. Or could be react dev tool giving false information like what the other post said.