Next.js Streaming FR- Suspense freezes the page and does not show the fallback component - Amplify and Next 13-14

[vitoorfraga]

Before opening, please confirm:

• [x] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React, Next.js

Amplify APIs

Not applicable

Amplify Categories

hosting

Environment information

No environment variable is required to reproduce this test.

Describe the bug

The issue occurs every time I make a request via SSR and use the Suspense API. The page is frozen, and under no circumstances is the component inside the fallback rendered.

export default function ChargePoints({ searchParams }) {
  const searchString = searchParams.search || ''

  return (
    <>
      <PageHeader title="Gerenciar pontos de recargas " />

      <section className={styles.wrapper}>
        <Search value={searchString} path="/operator/chargepoints" />

        <Suspense key={searchString} fallback={<LoadingAlert />}>
          <AdminChargePointsList searchString={searchString} />
        </Suspense>
      </section>
    </>
  )
}

The issue does not occur when deploying the project on Vercel.

Expected behavior

This is a video of the application running within the Vercel environment.

https://github.com/aws-amplify/amplify-js/assets/80723488/74f4e28f-cc9e-48b1-8d38-a7633e93e333

This is a video of the application running within the AWS Amplify environment.

https://github.com/aws-amplify/amplify-js/assets/80723488/781f95e2-8eb0-4936-bc3d-4e32bdaf0f6e

Reproduction steps

1- Perform an SSR request. 2- Use the Suspense API around the component that makes the fetch. 3- Deploy the application within Amplify.

[cwomack]

Hello, @vitoorfraga 👋 and thanks for opening this issue. It looks like this may be more related to Amplify Hosting, so I'm going to transfer this issue to that repo for better assistance.

[leiarenee]

We are having the same issue. Suspense does not work with amplify under nextjs

[syed-yawar]

This is related to streaming which works with Suspense. When app deployed on Amplify, streaming does not work. It might buffered the request somewhere and then after that passes it to broswer. details are mentioned here I'm still looking into the solution.

[aavaldez64]

I also have this problem, but even with Vercel and localhost, <Suspense> and loading.tsx file doesn't work. I'm using next v14.1.0 but also tried with next v14.0.2 (following the official tutorial https://nextjs.org/learn/dashboard-app/streaming) and the same thing happens. Suspense freezes the whole page until the component finishes loading.

[leiarenee]

This is related to streaming which works with Suspense. When app deployed on Amplify, streaming does not work. It might buffered the request somewhere and then after that passes it to broswer. details are mentioned here I'm still looking into the solution.

Looking forward to your solution.

[syed-yawar]

I currently don't have a solution. I've experimented with deploying my Proof of Concept app, which is built in Next.js 13/14 with streaming enabled, using various platforms such as AWS Amplify Hosting, Vercel, FlightControl, and Railway. Among these, only Amplify doesn't support streaming. Although all of these uses AWS for hosting but still getting this issue only on aws amplify

@cwomack, have you found a solution for this?

[oczkowski]

I've done some digging around on how Amplify Gen 2 works. SSR components run off lambda using the same node version defined in amplify.yml file.

However, amplify hides the lambda's as part of the Amplify service, meaning streaming can't be enabled manually. The only thing you get to see is the runtime logs in CloudWatch under /aws/amplify log groups.

I'm meeting our AWS account manager today, I'll ask if anything can be done to fix this.

[syed-yawar]

Certainly, it all makes sense, but at the same time, it's quite frustrating to invest so much time in this.

Looking forward to your discussion, and hopefully, we can identify a workaround.

[oczkowski]

Haven't got much from the call, we're waiting for an amplify specialist to look into it.

[shawngustaw]

Anyone have any updates on this?

[oczkowski]

I know this isn't related to amplify hosting but for those looking for a solution, you can try using SST. It has an experimental but not production-ready solution for streaming https://docs.sst.dev/constructs/NextjsSite#experimentalstreaming

You can read more about the state of it here. https://open-next.js.org/inner_workings/streaming.

SST is similar to Amplify in that it uses CDK to build the cloud formation and all resources. The nice thing about it is that you can actually see all the resources. Both the lambda's and edge functions.

[syed-yawar]

Yes, you're right @oczkowski. I already have a plan to test sst serverless when I get the time. Additionally, we can also consider using Flight Control for deployment. While it's not serverless, it sets up everything on AWS via CloudFormation. The streaming and options are working correctly with this solution too.

[Jay2113]

Hi everyone 👋 , Amplify Hosting currently does not support Next.js streaming. To learn more about the Next.js feature support, refer to our documentation here: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplifysupport.html#supported-unsupported-features.

We are tracking this as a feature request and will keep you posted on this thread with any updates.

[github-actions[bot]]

This has been identified as a feature request. If this feature is important to you, we strongly encourage you to give a 👍 reaction on the request. This helps us prioritize new features most important to you. Thank you!

[costleya]

This is a solved problem. https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/nextjs-response-streaming

Why does hosting not support it yet?

[leiarenee]

@costleya Amplify supports connection to lambda. Might there be a way for proxying partially to evaluate server-side part?

[romatallinn]

Yikes. Still an issue. 😢