aws-amplify / aws-amplify/amplify-hosting
Next.js Streaming FR- Suspense freezes the page and does not show the fallback component - Amplify and Next 13-14
- Dominant language
- Dockerfile
- Stars
- 481
- Forks
- 123
- PR merge metrics
- No merged PRs in 30d
Description
### Before opening, please confirm:
- [x] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-js/discussions).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-js/blob/main/CONTRIBUTING.md#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 (
<>
}>
)
}
```
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.
Contributor guide
Research direction
Start by reproducing the SSR request with React Suspense in a Next.js 13–14 application deployed on AWS Amplify, then compare the same application on Vercel. Use the listed reproduction steps and videos as references; done means the page does not freeze and the fallback component renders while the fetch is pending.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react
- Domain
- cloud
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100