Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix [cacheComponents] Forward navigation restores inapplicable state from previously-visited pages [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#91540•Fetched 2026-04-08 00:52:24
View on GitHub
Comments
1
Participants
2
Timeline
9
Reactions
5
Author
jimrandomhjimrandomh
Participants
jimrandomhjimrandomhkoichikkoichik
Timeline (top)
subscribed ×6commented ×1cross-referenced ×1issue_type_added ×1

Fix Action

Fix / Workaround

With cache components enabled plus workarounds from this thread

  • Click on a link to page A -> Fresh instance of page A in its default state
  • Browser back button -> Fresh instance of page A in its default state

Code Example

-
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/SorooshGb/next16-activity-breakage-repro

To Reproduce

Current vs. Expected behavior

This is a re-report of https://github.com/vercel/next.js/issues/86577 ; that issue thread apparently got repurposed into some sort of documentation issue, based on the apparent misunderstanding that this is expected behavior and people need to be told to work around it.

Suppose you have two pages, A and B. Page A contains some state, and a link to page B; page B contains a link to page A. You start on page A, trigger some state changes, then click on the link to page B. Then on page B, you either click on the link to page A, or press the browser Back button.

Before cache components (correct behavior):

  • Click on a link to page A -> Fresh instance of page A in its default state
  • Browser back button -> Restored state with your changes present

With cache components enabled:

  • Click on a link to page A -> Restored state with your changes present
  • Browser back button -> Restored state with your changes present

With cache components enabled plus workarounds from this thread

  • Click on a link to page A -> Fresh instance of page A in its default state
  • Browser back button -> Fresh instance of page A in its default state

Provide environment information

-

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

cacheComponents

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

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

Additional context

No response

extent analysis

Fix Plan

To resolve the issue with cache components in Next.js, we need to implement a workaround to ensure a fresh instance of the page is loaded when navigating back or clicking on a link.

Here are the steps:

  • Use the useRouter hook from next/router to access the router object.
  • Use the router.replace method instead of router.push to replace the current URL with a new one, which will reload the page.
  • Implement a custom Link component that uses router.replace when the link is clicked.

Example code:

import { useRouter } from 'next/router';

const CustomLink = ({ href, children }) => {
  const router = useRouter();

  const handleClick = (e) => {
    e.preventDefault();
    router.replace(href);
  };

  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  );
};

export default CustomLink;

Use this CustomLink component instead of the built-in Link component from next/link to ensure a fresh instance of the page is loaded when navigating.

Verification

To verify the fix, test the following scenarios:

  • Click on a link to page A: A fresh instance of page A should be loaded in its default state.
  • Click on the browser Back button: A fresh instance of page A should be loaded in its default state.

Extra Tips

  • Make sure to update all links in your application to use the CustomLink component.
  • If you're using other libraries or components that handle routing, you may need to modify them to use router.replace as well.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#ssr#installation#tensor shape#autograd error#retriever error#indexing error#inference speed#output truncation#response parsing

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix [cacheComponents] Forward navigation restores inapplicable state from previously-visited pages [1 comments, 2 participants]