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

priosshrsth · 2024-09-23T10:04:12Z

priosshrsth
Sep 23, 2024

Link to the code that reproduces this issue

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

To Reproduce

Any next js app with app directory support.( I Tried with 14 & 15)
Create multiple app routes / & /contact
Navigating to /contact from home page
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.

youhua · 2024-09-23T10:13:34Z

youhua
Sep 23, 2024

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

0 replies

priosshrsth · 2024-09-23T11:10:18Z

priosshrsth
Sep 23, 2024
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.

0 replies

priosshrsth · 2024-09-23T11:36:55Z

priosshrsth
Sep 23, 2024
Author

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.

0 replies

samcx · 2024-09-24T22:00:35Z

samcx
Sep 24, 2024
Maintainer

@priosshrsth I'm pretty sure expected caching behavior is happening here, but can you simplify your :repro: so we can confirm?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

Replies: 4 comments

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

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

priosshrsth Sep 23, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

Replies: 4 comments

youhua Sep 23, 2024

priosshrsth Sep 23, 2024 Author

priosshrsth Sep 23, 2024 Author

samcx Sep 24, 2024 Maintainer

priosshrsth
Sep 23, 2024

youhua
Sep 23, 2024

priosshrsth
Sep 23, 2024
Author

priosshrsth
Sep 23, 2024
Author

samcx
Sep 24, 2024
Maintainer