Nextjs Suspense works locally but not in production

[cm1337]

Summary

I am running into a weird issue where my suspense works locally but does not work in production. When I visit my webapp locally everything is working as expected - the area outside the suspense (header, footer, etc) loads in right away while the area inside the suspense displays my spinner while waiting for the backend to send the data over. I am using "key" for my suspense and using my searchParams as for the key.

However, when I deploy the webapp to production, when visiting the webapp it does not load at all until the entire call to the backend is complete. My webapp does not get displayed at all until everything is done loading.

The even weirder part is that I can run the build command on my webapp locally and run it and it works as expected. It's only when the built webapp is up on my production environment that this occurs.

Here is a video comparing local to production just to make it clear

nextjshelp.mp4

Here is some excerpts from my code where the suspense is set up.

export default async function SearchResultsPage({
  searchParams: {term, resultsPerPage=50, page=1}
}: {
  searchParams: any
}) {
  return (
    <>
      <Suspense key={term + resultsPerPage + page} fallback={<LoadingSpinner />}>
        <SearchResultsContainer term={term} resultsPerPage={resultsPerPage} page={page} />
      </Suspense>
    </>
  );
}

export async function SearchResultsContainer({
  term, resultsPerPage, page,
}: OnlineIdSearchParams) {
    const searchResults = await searchAccounts(term, page, resultsPerPage)
    return (
        <>
            <ul>
                {searchResults.map((searchResult) => (<li key={searchResult.id}>{searchResult.name}</li>))}
            </ul>
        </>
    );
}

Thank you very much!

Additional information

No response

Example

No response

[icyJoseph]

Where is this hosted? Some servers have buffering enabled, which AFAIK, collects all chunks of data sent by the server and only when all chunks are collected, forwards them to the client.

I think there's a chrome extension, Claire, which can tell you if the app is at least, served over HTTP2. That might be good to start debugging.

This doesn't happen is you build the app, and run it locally right? In production mode but in your computer.

[Amanullah-M360ict]

@icyJoseph how to fix?

[Sasha95]

https://stackoverflow.com/a/78473852

[eseQ]

@Sasha95 Actually it works for me, thanks

[dav-q]

I’m running into the same problem. I deployed my app on Amplify, and it seems the issue is related to Amplify hosting.

At the moment, it doesn’t fully support or isn’t very stable with Next.js streaming. This feature is still under consideration for support and development.

If you’re using this host instead of Vercel, you can check the current status and discussion here