Dynamic pages stuck on loading.tsx when JavaScript is disabled
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Home
Binaries:
Node: 18.16.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.4.3
eslint-config-next: 13.4.3
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true), Data fetching (gS(S)P, getInitialProps), Routing (next/router, next/navigation, next/link)
Link to the code that reproduces this issue or a replay of the bug
https://codesandbox.io/p/sandbox/relaxed-davinci-o1i9yl?file=%2Fapp%2Fpage.tsx%3A5%2C15
To Reproduce
Create a page that dynamically fetches some data on every request, either via export const revalidate = 0 or the no-store configuration on fetch.
Set up a global loading.tsx in the app folder.
Build and run the project.
Disable JavaScript in the web browser and open the dynamic page. The loading.tsx page is shown indefinitely.
Note: You can disable JavaScript in Chrome by pressing F12 to open the Chrome dev tools. Then press Ctrl + Shift + P and search for "disable JavaScript".
Describe the Bug
When you open a dynamic page with JavaScript disabled, you get stuck on the global loading.tsx indefinitely.
This also means that this page is effectively invisible to web crawlers, which kills SEO for that page.
Expected Behavior
The page should be loaded even with JavaScript disabled.
Which browser are you using? (if relevant)
Google Chrome
How are you deploying your application? (if relevant)
Locally and on Vercel
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction, especially app/page.tsx and the global app/loading.tsx. Build and open a dynamic page with JavaScript disabled, then trace how revalidate = 0 or fetch no-store interacts with the loading state. Done means the page renders its fetched content without JavaScript instead of remaining on loading.tsx, including for crawlers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100