AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Dynamic Pages Stuck On Loading.Tsx When JavaScript Is Disabled

With App Router, dynamic pages using revalidate=0 or no-store fetch and a global loading.tsx get stuck on the loading fallback when JavaScript is disabled, making content invisible to crawlers and harming SEO.

highConfidence 80%Next.jsAffected V13.4.3

Origin Analysis

Next.js App Router uses React 18 streaming SSR: loading.tsx is rendered as a Suspense fallback and streamed before the dynamic data resolves. Without JavaScript, the browser cannot execute the scripts that replace the fallback, so it remains indefinitely. This is an inherent limitation of streaming Suspense without a noscript fallback.
1. Create app/loading.tsx with a simple loading indicator. 2. Create app/page.tsx that fetches data with cache: 'no-store' or export const revalidate = 0. 3. Run next build && next start. 4. Disable JavaScript in Chrome: F12 > Ctrl+Shift+P > type 'Disable JavaScript'. 5. Open the dynamic page; loading.tsx is displayed forever.

Fixing Code Block

Edge Case Audit

Disabling streaming increases time-to-first-byte (TTFB) because the server must wait for data before sending any HTML. If data fetching is slow, users may see a blank page instead of a loading indicator. Ensure data fetches are optimized and consider monitoring performance. Rollback: remove the disableStreaming option to restore streaming behavior if performance degrades. This option may be deprecated in future Next.js versions; verify in your version's documentation.

Ecosystem Topology