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

Open
#3,843 41 comments 82 reactions 0 assignees View on GitHub
compute feature-request Next.js
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.