layout.tsx metadata title sometimes overrides client-side <title>

Link to the code that reproduces this issue

https://github.com/steveharrison/nextjs-client-page-titles

To Reproduce

1. nvm use 22.13.0
2. npm i
3. npm run dev
4. Navigate to http://localhost:3000
5. Note that the page title is "Layout page title".

Current vs. Expected behavior

I would expect the page title to be "Client page title", but sometimes it is "Layout title".

Additionally, if the useEffect is commented out, I would expect the page title to be "Testing" (coming from the <title> element in the markup and override the one from layout.tsx).

This is in npm run dev mode—in npm run start, it's barely noticeable but if you refresh the page enough times with Command-Shift-R with a 1ms timeout, I was able to get one where the page title remained "Layout title".

I don't understand how a server component is overriding stuff on the client—it would appear that there is some Next.js code that is setting the page title on the client too?

If you change the timeout to longer, say 50ms, then the Next.js code has usually run by then. Getting rid of the title in the layout component is one solution (to both the <title> and the effect way of setting the title), but then we don't get the fallback on pages that don't use client side titles.

Client-side titles are a must in some situations for us, such as page titles based on information only available client-side not server-side.

What is the expected behaviour here and how do you recommend handling titles on the client?

Provide environment information

Node.js v22.13.0

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Fri May 30 19:30:02 PDT 2025; root:xnu-12377.0.81.0.3~308/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 22.13.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.4.4 // Latest available version is detected (15.4.4).
  eslint-config-next: 15.4.3
  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)

Metadata

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

next dev (local), next build (local), next start (local)

Additional context

I would expect the <title> in the page to override the layout title too, as per https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#new-features-in-react-canary?

Run the linked reproduction with the listed Node.js and Next.js versions, using both npm run dev and npm run start, then compare the layout metadata, markup <title>, and client-side effect timing. Done means establishing the expected precedence for these title sources and documenting or verifying the recommended client-side handling.