Browser freeze after upgrading to NextJS 16?!
Unanswered
Birman posted this in #help-forum
BirmanOP
Hi,
I have the weirdest bug ever after upgrading to Nextjs 16 (from 15) and adding cached components and suspense boundaries. I used the whole day yesterday to isolate why this is happening, but I can't really fix it.
Basically one of my routes freezes my Chrome tab completely. But it happens only on the preview/build, not in dev mode. If a different page is hydrated and I push to the route, it works fine. If I run preview and go to the url directly it also works, but once I refresh it freezes. So it might be related to cached components?
I'm using Nextjs 16.2.2 and HeroUI 2.7.5. I played some pingpong with Opus to remove and add different things from the route and these are some results:
Structure:
Tried:** replacing all HeroUI components with plain HTML, commenting out all hooks/effects/child components, stripping all imports — none helped. The file itself seems "cursed" at the bundler level.
So I can literally add the "anything here" div and build and when I refresh the page, my tab becomes unresponsive and crashes after a while, when I remove it, it works fine. I have no idea whats going on here, but it fails consistently.
I have the weirdest bug ever after upgrading to Nextjs 16 (from 15) and adding cached components and suspense boundaries. I used the whole day yesterday to isolate why this is happening, but I can't really fix it.
Basically one of my routes freezes my Chrome tab completely. But it happens only on the preview/build, not in dev mode. If a different page is hydrated and I push to the route, it works fine. If I run preview and go to the url directly it also works, but once I refresh it freezes. So it might be related to cached components?
I'm using Nextjs 16.2.2 and HeroUI 2.7.5. I played some pingpong with Opus to remove and add different things from the route and these are some results:
Structure:
// page.tsx
<Suspense fallback={<Loading />}>
<VideoContent slug={slug} /> ← async server component
</Suspense>
// VideoContent returns:
<>
<VideoPageWrapper video={...} siteConfig={...} /> ← "use client"
<div>anything here</div> ← triggers freeze
</>Tried:** replacing all HeroUI components with plain HTML, commenting out all hooks/effects/child components, stripping all imports — none helped. The file itself seems "cursed" at the bundler level.
So I can literally add the "anything here" div and build and when I refresh the page, my tab becomes unresponsive and crashes after a while, when I remove it, it works fine. I have no idea whats going on here, but it fails consistently.
3 Replies
BirmanOP
I tried deleting the whole .next folder, I tried incognito tab, nothing has helped. I also can't really debug anything because it straight up freezes everything.
BirmanOP
I also tried Safari and it reliably also crashes Safari tabs.
return (
#Unknown Channel
<JsonLd data={jsonLd} />
<ErrorBoundary>
<VideoPageWrapper
video={video}
siteConfig={siteConfig}
totalVideos={totalVideos}
/>
</ErrorBoundary>
<div className="mt-8 2xl:container 2xl:mx-auto">
<Suspense fallback={<RecommendedVideosSkeleton />}>
<RecommendedVideos />
</Suspense>
</div>
</>
);
The real code looks like this, If I remove the div at the bottom it works perfectly, if I remove the ErrorBoundary and keep the div it also works, if I add both it locks up.
#Unknown Channel
<JsonLd data={jsonLd} />
<ErrorBoundary>
<VideoPageWrapper
video={video}
siteConfig={siteConfig}
totalVideos={totalVideos}
/>
</ErrorBoundary>
<div className="mt-8 2xl:container 2xl:mx-auto">
<Suspense fallback={<RecommendedVideosSkeleton />}>
<RecommendedVideos />
</Suspense>
</div>
</>
);
The real code looks like this, If I remove the div at the bottom it works perfectly, if I remove the ErrorBoundary and keep the div it also works, if I add both it locks up.