SSR and Cache Control Issues with Next.js: Help Needed

[tayebehsafdaridoost]

Link to the code that reproduces this issue

https://github.com/tayebehsafdaridoost

To Reproduce

Hi everyone,

I’m working on a Next.js project and encountering issues with Server-Side Rendering (SSR) and page caching. Specifically, when a user navigates backward using the browser’s back button, the page displays outdated (cached) information instead of fetching fresh data. Despite implementing various measures, the problem persists, and the user doesn't see the updated content immediately.

Here’s what I’ve tried so far:

Setting Cache-Control Headers:

1. Added Cache-Control: no-store in the headers() function of next.config.js to apply globally for all routes.
   Included the same header in API responses to prevent browser and intermediary caching.

2. Middleware Updates:
   Configured middleware to return NextResponse.next() with Cache-Control: no-store for all requests.
   Ensured the middleware also handles redirections based on user roles and authentication status.

3. Using cache: 'no-store':
   Modified all fetch requests in server-side and client-side code to use cache: 'no-store' along with Cache-Control headers.

4. Forcing Client-Side Updates:
   Used useEffect to refetch data when the user navigates back via router.asPath changes.
   Attempted to force a full page reload using window.onpopstate.

5. Meta Tags:
   Added meta tags to disable caching at the browser level:

Despite these efforts, the browser still displays cached information on backward navigation. My goal is to ensure SSR and fresh data fetching work correctly for all pages, including authenticated routes, public routes, and language-specific routes.

How can I ensure that the browser always fetches fresh data for SSR pages and doesn’t rely on cached versions?
Is there a better approach to manage middleware and headers for SSR and dynamic data fetching in Next.js?
Could there be specific issues with how I’ve configured next.config.js, Middleware, or API responses that cause this behavior?

Any help, suggestions, or debugging tips would be greatly appreciated.
Thanks in advance for your time and assistance!

Current vs. Expected behavior

How can I ensure that the browser always fetches fresh data for SSR pages and doesn’t rely on cached versions?
Is there a better approach to manage middleware and headers for SSR and dynamic data fetching in Next.js?
Could there be specific issues with how I’ve configured next.config.js, Middleware, or API responses that cause this behavior?

Provide environment information

"next": "^15.0.3",

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

create-next-app, Turbopack

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

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

Additional context

No response