vercel/next.js

Suspense infinite fallback loading state with javascript turned off

vladshcherbin opened this issue · 0 comments

Link to the code that reproduces this issue

https://github.com/vladshcherbin/suspense-infinite-loading

To Reproduce

  1. Start the app
  2. From home page go to /recipes and see loading state and recipes list
  3. Turn off javascript and do same thing (or reload the page)
  4. See infinite loading state
  • Check server logs to confirm data was fetched (logs output recipes number)
  • Check page source to see data actually exists, hidden at the end

Current vs. Expected behavior

Current

When javascript is turned off, suspense fallback state is infinite and never shows actual data. For the end user or search engine bot it results in an infinite loading state. Data is actually fetched on the server (can be seen in server logs) and exists hidden at the end of the page.

Screenshots:

Infinite loading state image
Server logs with data fetched image
Actual data and hidden html tags image

If Suspense is removed, data is shown to the end user but loading state is gone 🥲

Expected

Since data is actually fetched and exists on the page, it should be shown to the end user even with javascript turned off

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:02:45 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T8112
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 22.10.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 9.14.2
Relevant Packages:
  next: 15.1.0 // Latest available version is detected (15.1.0).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.2
Next.js Config:
  output: N/A

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

Lazy Loading, Runtime

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

next dev (local), next start (local)

Additional context

No response