Suspense in production is blocking rather than showing fallback UI

[Vk-jangid]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:52 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.20.2
      npm: 8.19.4
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.16
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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

App Router

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

n/a

To Reproduce

Just create a component in the page.js and wrap any internal component with Suspense and add a fallback UI. Deploy the application on the ec2 server with the "next build" & "next start". The fallback UI doesn't come on the client side instead it waits for the complete UI to load.

Describe the Bug

I am facing an issue with the suspense streaming.

I have used suspense in the page.js and added a fallback UI for that (not using loading.js and instead using suspense in the component itself) Everything is working fine in the DEV environment but in the PROD the suspense fallback is not showing at all instead it is waiting for the complete UI to load.

It is ruining the complete UX for the users as the user doesn't know that some background process is ongoing.

Expected Behavior

As soon as the navigation starts or refreshes the page, the loading fallback UI should show up.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[pstachula-dev]

Have same problem after upgade from: 13.4.8 to 13.4.19 - now with Supspense/or not - server component blocks whole page

[youweol-master]

I have similar problem in 13.4.19. when use Suspense in production，the component inside will display only after interaction with the page，for example click the page or scroll.

[pstachula-dev]

I found a solution to make Suspense work properly on normal pages that are not dynamic, e.g. [id].

You should have it enabled: export const dynamic = "force-dynamic";

You should remove: 'use client' - when you have 'use client', even when you export const force-dynamic, nextjs will build page to static site

Ok:

import { Suspense } from "react";
import { Posts } from "../Posts";

export const dynamic = "force-dynamic";

export default function PostsPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Posts />
      </Suspense>
    </div>
  );
}

Wrong:

import { Suspense } from "react";
import { Posts } from "../Posts";

export default function PostsPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Posts />
      </Suspense>
    </div>
  );
}

Wrong:

'use client';

import { Suspense } from "react";
import { Posts } from "../Posts";

export const dynamic = "force-dynamic";

export default function PostsPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Posts />
      </Suspense>
    </div>
  );
}

Wrong:

'use client';

import { Suspense } from "react";
import { Posts } from "../Posts";

export default function PostsPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Posts />
      </Suspense>
    </div>
  );
}

[wscotten]

Still seeing this issue in 13.5.2. Blocking my upgrade atm.

[github-actions[bot]]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the please add a complete reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template for App Router, template for Pages Router), but you can also use these templates: CodeSandbox: App Router or CodeSandbox: Pages Router.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Next.js (next@canary) to make sure your issue has not already been fixed.

If you cannot create a clean reproduction, another way you can help the maintainers' job is to pinpoint the canary version of next that introduced the issue. Check out our releases, and try to find the first canary release that introduced the issue. This will help us narrow down the scope of the issue, and possibly point to the PR/code change that introduced it. You can install a specific version of next by running npm install next@<version>.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the please add a complete reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the :+1: reaction on the topmost comment (please do not comment "I have the same issue" without reproduction steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

[raphaelbadia]

I noticed the same issue. I realized that it was caused by an issue with tree shaking (#55943).

My loading page included one small component from my component library, that pulled my whole package and made the loading.js so heavy that next hadn't the time to load the loading suspense boundary.

At least that's how I understand it.

[TheBaronRojo]

Hello, i have the same issue in next 13.5.4 when is deployed in AWS Amplify. This problem doesn't happens in dev mode or running local build.

I developed a project using suspense and loading.jsx.

Loading.jsx fallback is perfect, but with suspense in Aws Amplify, the page frozes and doesn't show the fallback, when the loading finish, the suspense show their children.

My repository

https://github.com/TheBaronRojo/Loadingtest

And the Aws Amplify project

https://master.d3mh90mxynovfi.amplifyapp.com/suspense/subsuspense

"Update"

In Vercel this problem doesn't happen

https://loadingtest.vercel.app/

[jvandenaardweg]

Found out i'm experiencing the same from a different issue here: https://github.com/vercel/next.js/issues/43548#issuecomment-1755556341

To quote myself, with a reproduction case:

I guess my issue lies in the use of <Suspense> on a page to have fine grained control over what component is loading, instead of a page wide loading indicator.

Using Vercel's app router demo to demonstrate:

No issue here when using a generic loading.tsx file: https://app-router.vercel.app/loading

But the issue is here "Streaming with Suspense": https://app-router.vercel.app/streaming

When you throttle the connection, using loading.tsx instantly shows a indicator. Which is good. But using the same throttled connection on the Streaming With Suspense demo prevents anything from being shown until a certain point. Not really clear when that exactly is.

Both also tested with the latest NextJS version locally and with a deploy on Vercel.

So the issue lies in the use of <Suspense> with a fallback on a page.tsx. When I switch over to using the loading.tsx the issue dissapears in my project. But that's not what I hoped, I really want to use the Suspense fallback on a per component basis and not have a loading.tsx on the page level.

So, to summarize:

1. Go to https://app-router.vercel.app/streaming
2. Throttle your connection in Dev Tools, using slow/fast 3G or something
3. Click "Edge Runtime" tab (or Node Runtime, it doesn't really matter which one)

You'll notice it takes a while to load but the Suspense fallback loading indicator will not show up. Where you would expect to have that loading indicator to be shown instantly, like with a page wide loading.tsx

Code: https://github.com/vercel/app-playground/tree/main/app/streaming

I think this is because the code for showing the fallback lives on the server, instead of the client? So it needs to do a fetch first to even know if it should show a loading indicator. But that's a big issue when you have a sub optimal connection, which can happen anywhere. So wether to show a loading indicator or not should live in the client, not the server. Or should be known already by using the prefetch in the background on page load. Please correct me if i'm wrong on any of this, I'm kinda guessing here as I don't know much about the NextJS/React internals.

[jvandenaardweg]

I found a solution to make Suspense work properly on normal pages that are not dynamic, e.g. [id].

You should have it enabled: export const dynamic = "force-dynamic";

Tried this, but it does not work. When you throttle the network connection you'll still see the same behaviour: the loading indicator is not instant or will not show up at all. You'll still have no idea something is loading.

Just to clarify: throttling the connection is just a way to test out your website using sub optimal network connections, which can happen to any user anywhere in the world. It seems like this Streaming Suspense feature is only working when you have a perfect connection.

[jvandenaardweg]

@Vk-jangid or @leerob can you remove the label please add a complete reproduction ? There's a reproduction case in my comment above

[imaxisXD]

So its a bug I was struggling with my code , thanks @jvandenaardweg for sharing a live example

[Jordaneisenburger]

Having the same issue as the OP, I have multiple components wrapped in Suspense inside a page.tsx marked it with "force-dynamic" but when I click on a link that navigates to that page, nothing happens and the site looks unresponsive and only navigates once all the Suspense boundaries are resolved.

In local development it works as expected Link navigates instantly and I see the fallback UI, smells like a Vercel hosting issue.

[pstachula-dev]

@Jordaneisenburger

Do you have 'use client' in that page.tsx?

[Jordaneisenburger]

@pstachula-dev the page.tsx itself doesn't have 'use client' but it has multiple client components inside Suspense boundaries. According to the NextJS docs from a page.tsx you can pass a promise to the components like so const dataPromise = getData(slug, searchParams); I thought this might the issue as maybe it somehow tries to resolve it already.

But here is where its gets weird: It works on iphones and Macbooks and locally on my windows but when hosted on vercel it doesn't work on windows (all in chrome)

[Jordaneisenburger]

Found out i'm experiencing the same from a different issue here: #43548 (comment)

To quote myself, with a reproduction case:

I guess my issue lies in the use of <Suspense> on a page to have fine grained control over what component is loading, instead of a page wide loading indicator. Using Vercel's app router demo to demonstrate: No issue here when using a generic loading.tsx file: https://app-router.vercel.app/loading But the issue is here "Streaming with Suspense": https://app-router.vercel.app/streaming When you throttle the connection, using loading.tsx instantly shows a indicator. Which is good. But using the same throttled connection on the Streaming With Suspense demo prevents anything from being shown until a certain point. Not really clear when that exactly is. Both also tested with the latest NextJS version locally and with a deploy on Vercel. So the issue lies in the use of <Suspense> with a fallback on a page.tsx. When I switch over to using the loading.tsx the issue dissapears in my project. But that's not what I hoped, I really want to use the Suspense fallback on a per component basis and not have a loading.tsx on the page level.

So, to summarize:

1. Go to https://app-router.vercel.app/streaming
2. Throttle your connection in Dev Tools, using slow/fast 3G or something
3. Click "Edge Runtime" tab (or Node Runtime, it doesn't really matter which one)

You'll notice it takes a while to load but the Suspense fallback loading indicator will not show up. Where you would expect to have that loading indicator to be shown instantly, like with a page wide loading.tsx

Code: https://github.com/vercel/app-playground/tree/main/app/streaming

I think this is because the code for showing the fallback lives on the server, instead of the client? So it needs to do a fetch first to even know if it should show a loading indicator. But that's a big issue when you have a sub optimal connection, which can happen anywhere. So wether to show a loading indicator or not should live in the client, not the server. Or should be known already by using the prefetch in the background on page load. Please correct me if i'm wrong on any of this, I'm kinda guessing here as I don't know much about the NextJS/React internals.

Even on a fast 1GB connection if I go to https://app-router.vercel.app/streaming and click on either "Edge Runtime" or "Node Runtime" nothing happens and then after x amount of time we navigate to the page we clicked on.

[ernestograndoli]

I have the same issue. I'm working with next Js latest version, when I'm coding in my localhost everything is working as expecting, also in vercel I have not trouble to see the loading fallback in suspense component. But when I deploy to Amplify is not working. Actually I tried adding a delay for 8 second to try if in any time load my components but Im only can see the page is loading in browser tab and the page render after the delay is done. I don't know what to try. I set the build Amplify to use a node js docker image version 18 and the last version of next Js but is not working. If anyone have a solution appreciate it.

[AlexKvazos]

I can confirm the same issue on Digital Ocean. The same exact code works when deployed to Vercel...

[tsiatka]

same issue here

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[ernestograndoli]

I solved using a loading.tsx from next and then the suspense where I want to use it. But if you put the suspense in you page without loading previously I think next still waiting to render the page from the server and for that you can see you suspense loading. Maybe is a posible solution.

[ChristophWolfPCG]

I'm having the same issue. Suspense works fine when running npm build and start locally, even after deleting buildDir. Online I run it on Azure Webapp

@ernestograndoli can you elaborate? i can't quite follow

[ernestograndoli]

@ChristophWolfPCG Next.js provides a loading.js (client component) that you can use in your app routes. By placing a loading.js with a spinner, for example, in your app's route, the spinner becomes active and displays on the screen as you navigate to each page throughout your project. You can have a unique loading file in each root folder of your project, each with different functionalities. For instance, on some pages, you may prefer to use a skeleton, so you can create a different loading.js in your /contact page. However, if you have a loading.js in the main root app, you will likely see both.

In my case, my app has a layout with an aside menu, header, and footer. In the center, I render the content of the current page, and in one of them, I have five cards that consume different APIs to display information. Previously, I used <Suspense fallback={} <Suspense fallback={} etc. However, when I deployed to AWS, I never saw the loading. The way I made it work was to define a general loading using the loading.js file and keep the Suspense with the loading fallback for each card. First, the main spinner appears, and then it renders the loading in your suspense component. You can see in the next image what I mean. I don't know if this is the proper way, but it was enough to resolve my problem, and my app is running faster now.

I hope this helps you.

[blenky36]

Also experiencing issues with <Suspense /> blocking page navigations from server components. This sample repo demonstrates the page being blocked until all async actions in the destination server component are resolved, even when wrapped in a <Suspense />.

Hosted on Vercel and includes a loading.tsx component to no effect. The suspense behaviour works as expected on a page refresh once on the destination page, but is blocking on navigation from the source page.

https://suspense-broken-demo.vercel.app/ https://github.com/blenky36/suspense-broken-demo

[blenky36]

Further investigations have found that navigation is not blocked when using client side <Link /> components but it is blocked when using server side navigation using redirect from next/navigation. Have updated the sample repository to demonstrate this.

Is this intended functionality?

Also experiencing issues with <Suspense /> blocking page navigations from server components. This sample repo demonstrates the page being blocked until all async actions in the destination server component are resolved, even when wrapped in a <Suspense />.

Hosted on Vercel and includes a loading.tsx component to no effect. The suspense behaviour works as expected on a page refresh once on the destination page, but is blocking on navigation from the source page.

https://suspense-broken-demo.vercel.app/ https://github.com/blenky36/suspense-broken-demo

[Sathosk]

I'm facing the same issue, I'm using docker with the dockerfile provided by vercel repository, it works locally the production build, but when I run the container on an EC2 machine the suspense doesn't work, so the page blocks until fully rendered on the server instead of streaming the component.

I have tried using force-dynamic with no success. Anybody has any clue as to why this happens?

[siduck]

anyone found a workaround yet? mine works on vercel but not on other hosting platforms like azure

Its really surprising that dev environment seems faster

https://github.com/vercel/next.js/assets/59060246/bc9b8b41-27da-49ba-b806-390fb4cb3ef5

[Charlesgln]

Same problem here,works well in dev mode but once deployed into aws suspense blocking.

[leerob]

1. Can you reproduce on your local machine with the same setup you are deploying to production?
2. For example, are you using Docker with the provided Dockerfile example? I am assuming this is not a static export.

It would be helpful to verify that a Dockerized app running locally can or cannot reproduce this.

[Jordaneisenburger]

1. Can you reproduce on your local machine with the same setup you are deploying to production?
2. For example, are you using Docker with the provided Dockerfile example? I am assuming this is not a static export.

It would be helpful to verify that a Dockerized app running locally can or cannot reproduce this.

Hi @leerob as mentioned above this issue also happens on https://app-router.vercel.app/streaming if you open this link in a incognito tab and click on the "Edge runtime" button you can see that it blocks navigation. I believe this to be Vercels demo environment should this be sufficient as a reproduction environment ?

[zakarriyah]

Hello, i have the same issue in next 13.5.4 when is deployed in AWS Amplify. This problem doesn't happens in dev mode or running local build.

I developed a project using suspense and loading.jsx.

Loading.jsx fallback is perfect, but with suspense in Aws Amplify, the page frozes and doesn't show the fallback, when the loading finish, the suspense show their children.

My repository

https://github.com/TheBaronRojo/Loadingtest

And the Aws Amplify project

https://master.d3mh90mxynovfi.amplifyapp.com/suspense/subsuspense

"Update"

In Vercel this problem doesn't happen

https://loadingtest.vercel.app/

@leerob

[Sathosk]

1. Can you reproduce on your local machine with the same setup you are deploying to production?
2. For example, are you using Docker with the provided Dockerfile example? I am assuming this is not a static export.

It would be helpful to verify that a Dockerized app running locally can or cannot reproduce this.

@leerob

1. No, I am actually running the exact same image that is being used on production. I have even tried building the image on the EC2 machine and running it locally to see if there was any difference and it works locally but not on the EC2 machine. The suspense only fail to work on the EC2 machine.
2. Yes I am using this example. I'm using standalone export.

Due to this issue I had to withdraw from doing fetch calls on server components, instead, I am forced on doing it in a client component since I can't find a solution that works in production on the EC2.

[siduck]

1. Can you reproduce on your local machine with the same setup you are deploying to production?
2. For example, are you using Docker with the provided Dockerfile example? I am assuming this is not a static export.

It would be helpful to verify that a Dockerized app running locally can or cannot reproduce this.

@leerob

1. No, I am actually running the exact same image that is being used on production. I have even tried building the image on the EC2 machine and running it locally to see if there was any difference and it works locally but not on the EC2 machine. The suspense only fail to work on the EC2 machine.
2. Yes I am using this example. I'm using standalone export.

Due to this issue I had to withdraw from doing fetch calls on server components, instead, I am forced on doing it in a client component since I can't find a solution that works in production on the EC2.

i face similar issue but it works on our vercel hosting , not the azure hosting. so we moved to vercel hosting temporarily

[KoaLaYT]

After I disabled buffering in Nginx conf, it works.

[Sathosk]

After I disabled buffering in Nginx conf, it works.

In my case, we don't have an Nginx server running behind the container. Instead, we have AWS API Gateway pointing to it. I'm not sure if there is a way to disable proxy buffering on the gateway, but I believe it's not an option for us.

[siduck]

After I disabled buffering in Nginx conf, it works.

can confirm this fixed issue with out azure vm too

[Vk-jangid]

After I disabled buffering in Nginx conf, it works.

I am using AWS and suspense is now working after disabling the buffering in nginx.

[leerob]

Thanks folks! Made a PR to add this note to disable buffering for self-hosting with streaming in the docs.

[syed-yawar]

Hello, i have the same issue in next 13.5.4 when is deployed in AWS Amplify. This problem doesn't happens in dev mode or running local build.

I developed a project using suspense and loading.jsx.

Loading.jsx fallback is perfect, but with suspense in Aws Amplify, the page frozes and doesn't show the fallback, when the loading finish, the suspense show their children.

My repository

https://github.com/TheBaronRojo/Loadingtest

And the Aws Amplify project

https://master.d3mh90mxynovfi.amplifyapp.com/suspense/subsuspense

"Update"

In Vercel this problem doesn't happen

https://loadingtest.vercel.app/

@TheBaronRojo Have you found the solution for this on AWS Amplify?

[TheBaronRojo]

@syed-yawar Hello, No, I still haven't found a solution

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.