vercel / vercel/next.js

Dynamic pages stuck on loading.tsx when JavaScript is disabled

Open
#50,150 26 comments 43 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Linking and Navigating Pages Router
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.