Hydration/rendering fails after resume – raw RSC flight data?

[topmar]

After resuming the app (e.g. returning to an inactive tab or after waking the device from sleep), the browser shows what appears to be serialized React Server Component (RSC) flight data instead of the expected HTML page. No actual content is rendered.

the page should render normally as if nothing happened.

This happens repeatedly when:
The app is running in production (Docker on my VPS).
I visit the site and leave the tab open.
Upon returning, I see raw RSC output like:

Detta fel uppstår fortfarande. sådan

1:"$Sreact.fragment"
2:I[7555,[],""]
3:I[1295,[],""]
6:I[9665,[],"MetadataBoundary"]
8:I[9665,[],"OutletBoundary"]
b:I[4911,[],"AsyncMetadataOutlet"]
d:I[9665,[],"ViewportBoundary"]
f:I[6614,[],""]
:HL["/_next/static/css/e9d58368187531c2.css","style"]
0:{"P":null,"b":"UZIiU1uQMvYaRPMypgtDu","p":"","c":["","sv"],"i":false,"f":[[["",{"children":[["locale","sv","d"],{"children":["__PAGE__",{}]},"$undefined","$undefined",true]}],["",["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["locale","sv","d"],["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/e9d58368187531c2.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],"$L4"]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L5",["$","$L6",null,{"children":"$L7"}],null,["$","$L8",null,{"children":["$L9","$La",["$","$Lb",null,{"promise":"$@c"}]]}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","hfen49tbZJyetoKPJfjie",{"children":[["$","$Ld",null,{"children":"$Le"}],null]}],null]}],false]],"m":"$undefined","G":["$f","$undefined"],"s":false,"S":true}
15:"$Sreact.suspense"
16:I[4911,[],"AsyncMetadata"]
5:["$","main",null,{"children":["$L10","$L11","$L12","$L13","$L14"]}]
7:["$","$15",null,{"fallback":null,"children":["$","$L16",null,{"promise":"$@17"}]}]
4:["$","html",null,{"lang":"sv","children":["$","body",null,{"className":"__variable_4bc053 __variable_61c949 antialiased","children":"$L18"}]}]
a:null
19:I[3063,["76","static/chunks/76-1b585a854fa7da0d.js","506","static/chunks/506-86bf62317d7c844b.js","465","static/chunks/app/%5Blocale%5D/page-908144a5d21bb5df.js"],"Image"]
1a:I[6874,["76","static/chunks/76-1b585a854fa7da0d.js","506","static/chunks/506-86bf62317d7c844b.js","465","static/chunks/app/%5Blocale%5D/page-908144a5d21bb5df.js"],""]
10:["$","div",null,{"className":"relative w-full h-screen md:h-[900px]","children":[["$","$L19",null,{"src":"/banner.jpg","alt":"","fill":true,"className":"object-cover z-0","priority":true,"aria-hidden":"true"}],["$","section",null,{"className":"relative max-w-7xl mx-auto px-4 pt-[5rem]","aria-labelledby":"hero-title","children":["$","div",null,{"className":"w-full md:inline-block text-left mt-[2rem] md:mt-[10rem]","children":[["$","h1",null,{"id":"hero-title","className":"text-3xl drop-shadow-xl/50 font-medium md:text-5xl","dangerouslySetInnerHTML":{"__html":"VETERINÄRVÅRD MED KÄRLEK"}}],["$","h2",null,{"className":"pl-1 text-xl drop-shadow-xl/50 mt-[1rem] font-medium","children":"Mobila veterinärtjänster utan att lämna hemmet"}],["$","$L1a",null,{"href":"/book","className":"   inline-flex items-center justify-center whitespace-nowrap transition-all shrink-0   outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]   bg-[#f7f7f7] shadow-xs hover:bg-[#f7f7f7]/80   mt-8 h-10 px-6 w-100 max-w-[70%] mx-auto md:mx-0 font-semibold text-base text-center","aria-label":"Boka hembesök","children":"Boka hembesök"}]]}]}],"$L1b"]}]
11:["$","section",null,{"className":"flex flex-col h-90 md:flex-row md:h-60 w-full gap-[1]","children":[["$","div",null,{"className":"relative flex-1","children":[["$","$L19",null,{"src":"/vaccination.jpg","alt":"","fill":true,"sizes":"(min-width: 768px) 33vw, 100vw","className":"absolute object-cover","aria-hidden":"true"}],["$","$L1a",null,{"href":"/services/vaccinations","className":"absolute inset-0 flex items-center justify-center text-center text-white text-xl font-medium bg-black/50 hover:bg-black/35 transition duration-300 ease-in-out","title":"Läs mer om vaccinationer","aria-label":"Läs mer om vaccinationer","children":"VACCINATIONER"}]]}],["$","div",null,{"className":"flex-1 flex","children":["$","div",null,{"className":"relative flex-1","children":[["$","$L19",null,{"src":"/vet_at_home.jpg","alt":"","fill":true,"sizes":"(min-width: 768px) 33vw, 100vw","className":"absolute object-cover","aria-hidden":"true"}],["$","$L1a",null,{"href":"/services/care-at-home","className":"absolute inset-0 flex items-center justify-center text-center text-white text-xl font-medium bg-black/50 hover:bg-black/35 transition duration-300 ease-in-out","title":"Läs mer om veterinärvård hemma","aria-label":"Läs mer om veterinärvård hemma","children":["$","pre",null,{"children":"VETERINÄRVÅRD HEMMA"}]}]]}]}],["$","div",null,{"className":"flex-1 flex","children":["$","div",null,{"className":"relative flex-1","children":[["$","$L19",null,{"src":"/end_of_life.jpg","alt":"","fill":true,"sizes":"(min-width: 768px) 33vw, 100vw","className":"absolute object-cover","aria-hidden":"true"}],["$","$L1a",null,{"href":"/services/end-of-life","className":"absolute inset-0 flex items-center justify-center text-center text-white text-xl font-medium bg-black/50 hover:bg-black/35 transition duration-300 ease-in-out","title":"Läs mer om stöd vid livets slut","aria-label":"Läs mer om stöd vid livets slut","children":["$","pre",null,{"children":"AVSLUTNING AV LIVET"}]}]]}]}]]}]```

This is not a dev console or source view — it's the actual visible page content.
Next.js version: 15.3.1
Using app/ directory with React Server Components
Routing localized using next-intl (/sv)
Issue only appears after resuming tab/device in production
Hosting: VPS with Docker (not Vercel)
Styling: Tailwind CSS
Localization: next-intl
GitHub repo available for review (I can share the URL if needed)
Let me know what else I can provide to help debug this issue.

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[vitodev1 (Soapistic)]

Hey there,

I’ve tried visiting the website on Chrome and Safari, and it turns out that on Safari the website works properly, so i’ve tried turning off caching on Chrome(Chrome is known for its heavy caching), and the website did work properly.

When you hit the back button, the browser wants to reuse the already cached RSC stream, but it’s already expired or corrupted, so instead of React hydrating it, the browser prints the serialised data.

If you want to see what’s causing the issue, disable caching on your browser and take a look at what’s fetched and what’s reused

As a workaround for now, i’d suggest you force refresh on back or forward, by using javascript’s “location.reload()” or ‘use client’ on your pages.
If you also could share your github, i’d be happy to help.

[vitodev1 (Soapistic)]

@topmar

thank you for wanting to help. I’m new to next.js and I probably did something wrong somewhere… If it’s something with the cache, then the problem is probably in caching backend queries in the action.ts file. Link to github GitHub - topmar/front-redvet: Website for a veterinary clinic

Thank you for sharing your code with me, i’ve looked a bit into the code and the website.

On the website, there is a header: cache-control, which has a value of : s-maxage=86400, stale-while-revalidate=31449600, what this essentially means, is that your server tells the cdn to cache that .rsc file for 24 hours, and even if it’s outdated to serve that version for up to a year.
Which means, that if you switch the language, the browser still receives the old .rsc file, and react tries to connect it to the new html and it doesn’t match.
I have a few suggestions, you could opt out of caching by:

• Using cache: 'no-store', instead ofnext: { revalidate: CACHE_TTL }`

Or if your content in static, you could try and use cache: 'force-cache'.

There is also a workaround with next.config.js file, where you can modify the headers and specify that you don’t want to store the cache:

async headers() {
    return [
      {
        source: '/(.*)', // Apply it to any route you'd want.
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-store', // This prevents cdn and browser caching.
          },
        ],
      },
    ]
  },

Let me know if these fixed worked for you.

[topmar]

The data on the page will not be updated more often than every 24 hours, so I want to cache it to avoid making new requests all the time, which would make the page load faster. So maybe I should try using cache: 'force-cache'?

[vitodev1 (Soapistic)]

I’ve looked into the code some more, and it seems that the problem lies within the implementation of next-intl, which hinders the caching operations, and specifically within this file
If you try removing these two lines and converting the layout to non-asynchronous:

  const { locale } = await params
  setRequestLocale(locale)

and adjusting the code, it would allow your project to use SSG
I also would suggest you take a look at some of next-imtl demos, which would help you in achieving the best result for your specific need.