Skip to content

[Next 16 / React 19] Hydration Failure on BFCache restore after using browser back and forward button in dev mode #92687

@luan-services

Description

@luan-services

Link to the code that reproduces this issue

https://github.com/luan-services/nextjs-browser-issue-example

To Reproduce

Create a minimal Next.js 15 App Router project.

Create a simple Client Component page (e.g., /dashboard) with no external libraries, just a basic UI and a console.log:

"use client";
import { useEffect } from "react";

export default function DashboardPage() {
console.log("Component Rendered");

useEffect(() => {
    console.log("Component Mounted");
}, []);

return <div>Dashboard Test Page</div>;

}

  1. Run the development server (npm run dev) on http://localhost:3000.
  2. Navigate to /dashboard. Notice the console.log working properly.
  3. Focus the browser's address bar, type http://localhost:3000/ (or any other route) and press Enter (Hard Navigation).
  4. Once the new page loads, click the browser's native Back Button.
Gravando.2026-04-12.121338.mp4

Current vs. Expected behavior

When navigating back to a page via the browser's back button after a hard navigation (typing URL and pressing Enter), the Next.js App Router fails to hydrate the component in development mode (next dev). The browser restores the cached HTML from the BFCache, but React enters a "dead" state. No component lifecycle runs, no console.log is executed, and any state/hooks become permanently suspended without throwing any errors in the console.

Expected Behavior
The browser should restore the /dashboard page, and Next.js should either rehydrate the React tree (triggering the console.log again) or perform a hard reload to restore functionality.

Actual Behavior
The browser displays the cached HTML of the /dashboard page, but the JavaScript execution is completely dead.

Provide environment information

Environment

Next.js version: 16.2.3
React version: 19.2.4
Operating System: Windows
Browser: Chrome / Edge (Chromium-based
Node.js version: v22.15.0

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

Linking and Navigating, Pages Router, Loading UI and Streaming

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

next dev (local)

Additional context

This issue seems strictly related to how the development server handles the browser's BFCache.

If the exact same code is deployed to a production environment (or run via GitHub Codespaces with HTTPS and proxy cache-control headers), the back navigation works perfectly and the component re-renders as expected. I provided two videos of my app where i first noticed this bug, it is the same logic, my session keeps pending because better auth does not run at all and i get stuck on loading screen, but on github codespaces it works fine.

Forcing Cache-Control: no-store via next.config.ts headers does not prevent this bug in the local dev environment.

https://github.com/user-attachments/assets/48a2cecd-d314-4371-9714-91f54d93bd6f
https://github.com/user-attachments/assets/7f4ef5dd-7dc5-4930-81f1-49b21a362b43

Metadata

Metadata

Assignees

No one assigned

    Labels

    Linking and NavigatingRelated to Next.js linking (e.g., <Link>) and navigation.Loading UI and StreamingRelated to loading UI (loading.tsx) and streaming.Pages RouterRelated to Pages Router.locked

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions