nextjs - 💡(How to fix) Fix [Turbopack] Intermittent structural hydration mismatch in Server Components (dev mode only) [2 comments, 3 participants]

Link to the code that reproduces this issue

No minimal reproduction repo yet — will create one if needed.

To Reproduce

1. Create a Server Component that renders a list of card components (also Server Components) with the following structure:

// VideoCard.tsx (Server Component — no "use client")
export const VideoCard = ({ videoId, title, channelTitle }: Props) => {
    return (
        <div className="group rounded-lg">
            <a href={`https://www.youtube.com/watch?v=${videoId}`} target="_blank" rel="noopener noreferrer" className="block">
                <div className="relative aspect-video">
                    <img src={`https://i.ytimg.com/vi/${videoId}/sddefault.jpg`} alt={title} loading="lazy" />
                </div>
            </a>
            <div className="p-4">
                <a href={`https://www.youtube.com/watch?v=${videoId}`} target="_blank" rel="noopener noreferrer">
                    <h3>{title}</h3>
                </a>
                <p>{channelTitle}</p>
            </div>
        </div>
    );
};

1. Render ~10 of these cards inside a horizontally scrollable container (also a Server Component)
2. Run next dev (Turbopack enabled by default in Next.js 16)
3. Reload the page several times — the hydration error appears intermittently

Current vs. Expected behavior

Current behavior:

After several reloads, an intermittent hydration error appears:

Hydration failed because the server rendered HTML didn't match the client.

  <VideoCard>
    <div className="group roun...">
      <a>
+     <div className="p-4">
-     <a
-       href="https://www.youtube.com/watch?v=..."
-       target="_blank"
-       rel="noopener noreferrer"
-     >

The server-rendered DOM has <div className="p-4"> (the info section) as the second child, but React expects <a> (the title link) at that position — as if the <div> wrapper was dropped from the RSC payload.

Key observations:

• The affected component is a pure Server Component (no "use client", no hooks, no browser APIs)
• All parent components are also Server Components
• The error is structural (element type mismatch), not a text content mismatch
• The error is intermittent — it does not occur on every reload
• Tested in incognito window — same result (not caused by browser extensions)

Expected behavior:

No hydration error. Server Components should not have hydration mismatches since they only render on the server.

Workaround

pnpm build && pnpm start (production mode) does not reproduce this error. The issue is specific to Turbopack dev mode.

Provide environment information

Operating System:
  Platform: darwin (macOS 26.2)
  Arch: arm64
Binaries:
  Node: 22.16.0
  npm: 10.9.2
  pnpm: 10.26.1
Relevant Packages:
  next: 16.1.1
  react: 19.2.0
  react-dom: 19.2.0

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

Turbopack

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

next dev (local)

Additional context

Related issues:

• #74357 — Similar Turbopack-only hydration error with simple components (closed/locked)
• #85370 — Turbopack hydration error / double render with dynamic imports
• #75830 — Turbopack-only hydration error with Chakra UI