Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Browser navigation in between app directory pages are cached and I cannot opt out #70340

Closed
priosshrsth opened this issue Sep 23, 2024 · 3 comments
Closed

Browser navigation in between app directory pages are cached and I cannot opt out #70340

priosshrsth opened this issue Sep 23, 2024 · 3 comments
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@priosshrsth
Copy link

Link to the code that reproduces this issue

https://github.com/priosshrsth/next-cache-test

To Reproduce

  1. Any next js app with app directory support.( I Tried with 14 & 15)
  2. Create multiple app routes / & /contact
  3. Navigating to /contact from home page
  4. Click back button on the browser.

Current vs. Expected behavior

The homepage after browser navigation is not latest and is cached page. No code in /page.tsx runs and no fetch requests are made.

Expected behavior: Same thing with pages route and getServerSideProps shows updated data. And If I put console.log inside getServerSideProps, it runs. Also, navigation back from pages route to homepage also returns updated data. This is so bad and so wierd. I don't want to migrate my whole app to pages directory now.

Provide environment information

Mac OS
Brave browser

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

Navigation

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

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

Additional context

I tested on next js 14 and 15. I have used everything like export const dynamic = 'forcedynamic', settint revalidate and everything. Nothing works. meta tag anc cache headers are also set to not cache as well.
@priosshrsth priosshrsth added the bug Issue was opened via the bug report template. label Sep 23, 2024
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label Sep 23, 2024
@priosshrsth priosshrsth changed the title Browser navigatoin in between app directory pages are cached and I cannot opt out Browser navigation in between app directory pages are cached and I cannot opt out Sep 23, 2024
@youhua
Copy link

youhua commented Sep 23, 2024

This looks like the browser's bfcache https://web.dev/articles/bfcache

@priosshrsth
Copy link
Author

https://web.dev/articles/bfcache

You might be correct. How can I verify this. Adding pageshow event listener doesn't work. As this does not get retriggered on navigation. Also, I tried adding beforeunload, but it doesn't seem to disable bfcache. And also it works when navigating from pages routes to app routes in brave browser. But on safari it seels, they are always cached on browser navigation.

@priosshrsth
Copy link
Author

priosshrsth commented Sep 23, 2024 •
edited
Loading 

import { type PropsWithChildren, useEffect, useState } from "react";
import { usePathname, useRouter } from "next/navigation";

export function BackButtonCacheTest({ children }: PropsWithChildren) {
  const router = useRouter();
  const pathname = usePathname();
  const [isBrowserNav, setIsBrowserNav] = useState(false);

  useEffect(() => {
    window.addEventListener("popstate", () => {
      setIsBrowserNav(true);
    });
  }, [router]);

  useEffect(() => {
    if (!isBrowserNav) {
      return;
    }

    setTimeout(() => {
      setIsBrowserNav(false);
      router.refresh();
    }, 500);
  }, [pathname, router, isBrowserNav]);

  return (
    <>
      {isBrowserNav && (
        <div className="pointer-events-auto fixed inset-0 z-50 h-screen w-screen bg-black bg-opacity-50" />
      )}
      {children}
    </>
  );
}

Wrapping children in layout in this component seem to work. Maybe I can work on it to improve and make it more predictable.

@vercel vercel locked and limited conversation to collaborators Sep 24, 2024
@samcx samcx converted this issue into discussion #70422 Sep 24, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@youhua @priosshrsth