Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suspense breaks on initial static render of page. #50215

Open
1 task done
Djboy08 opened this issue May 23, 2023 · 7 comments
Open
1 task done

Suspense breaks on initial static render of page. #50215

Djboy08 opened this issue May 23, 2023 · 7 comments
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@Djboy08
Copy link

Djboy08 commented May 23, 2023

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: 8.4.0
    Relevant packages:
      next: 13.4.4-canary.3
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.2

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/Djboy08/nextjs-bug

To Reproduce

BASED ON REPO:
you can see the normal route which is not using static stuff, and theres a bugged route, which is using static stuff.

Bugged route wont ever show the loading screen.

In order to reproduce simply create a blocking RSC page that is static in some form, i.e dynamic = 'force-static' or generateStaticParams in a dynamic route.

If the dynamic page with a slug has not been compiled yet, a loading.tsx or suspense won't show in order to wait for the initial build of the page. As well as a loading.tsx does not show if your navigating to a already compiled/cached page and theres a latency of any kind, a loading.tsx won't show..

Describe the Bug

The bug causes dynamic routes that are trying to use ISR to cache the dynamic pages to serve on next request to not show loading.tsx/suspense fallback on first request and on minor latency or delays while the static page is loading itself.

If you have a slow internet connection loading.tsx should still show up regardless if its a static route because the route may be slow and we want something to fill the area.

Secondly, loading.tsx/suspense should atleast show on the first request since there is not a compiled page yet. In a case where a static dynamic page takes 5 seconds to compile, the website just blocks until its done.

Expected Behavior

The expected behavior is that a suspense fallback or loading file should show up on static files that are happening at runtime for
A. the first request that causes the page to be compiled and cached (which takes time)
B. any subsequent request that due to internet connection may cause the page take time to fetch the page.

Which browser are you using? (if relevant)

Edge

How are you deploying your application? (if relevant)

Vercel

@Djboy08 Djboy08 added the bug Issue was opened via the bug report template. label May 23, 2023
@github-actions github-actions bot added area: app App directory (appDir: true) Navigation Related to Next.js linking (e.g., <Link>) and navigation. labels May 23, 2023
@AntoineBourin
Copy link
Contributor

Got the same issue on my side.
I tried to break my page in little chunks with Suspense, so Streaming in my dynamic segment.

This worked like a charm.
But I had the idea to add a generateStaticParams function to generate a little part of pages available as static.

Now, after doing this, I don't have Streaming anymore.
When I try to access dynamic pages, render is blocked, Suspense doesn't work anymore.

I have the same issue but with Suspense directly inside the page.

@AntoineBourin
Copy link
Contributor

Tried to reproduce on 13.3, same issue.

@Djboy08
Copy link
Author

Djboy08 commented Jun 19, 2023

Any updates on this?

@0xbulma
Copy link

0xbulma commented Jul 5, 2023

Same issue on Next.js 13.4.2

@lmatteis
Copy link

I think this is by design:

  • Static page is just that: a static HTML file - no need for streaming since data is already all there - hence no need for suspense
  • Dynamic page: suspense and streaming needed since page is rendered at each request

@frankyw
Copy link

frankyw commented Sep 21, 2024

Also have this problem.

Am trying to generate a static page on first page load using export const dynamic = 'force-static', and improve the experience of initial page load using suspense.

It works fine in development, with spinner showing. After production build, the page is blocking with no streaming.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Development

No branches or pull requests

6 participants