Next.js Discord

Discord Forum

Streaming/Suspense on Vercel

Answered
Harlequin Duck posted this in #help-forum
Open in Discord
Harlequin DuckOP
I have a page with reacts <Suspense>.
When I run it locally with npm run build, npm run start everything is working perfectly fine. I see the Suspense fallback and after a short delay I get the actuall data streamed in.

On Vercel however this does not work at all. When opening the url, the browser just waits for a few seconds and then i get the entire page with all it's data.
I never see the Suspense fallback.

Is there something special I need to do for a Vercel deployment? Like a hidden Vercel setting, or something to my code?
Answered by Western paper wasp
Possibly your PC has some type of software installed that changes network behavior (e.g. some type of VPN or proxy or antivirus that waits for complete network requests before forwarding them?)
View full answer

32 Replies

Harlequin DuckOP
This has to be a Vercel Issue!
I did a fresh create-next-app@latest.
Then I added a 5 seconds delayed server component to the root page. I still get the same problem when deployed to Vercel.
I don't see the fallback, or it comes very delayed. The browser just loads until the promise is resolved.
My Test URL: https://next-suspense-test-ten.vercel.app/
import { Suspense } from "react";

const SuspenseTest = async () => {
  //sleep for 5 seconds
  await new Promise((resolve) => setTimeout(resolve, 5000));
  return <div>Hello World, I am done sleeping!</div>;
};

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Suspense fallback={<div>I AM LOADING</div>}>
        <SuspenseTest />
      </Suspense>
    </main>
  );
}

export const dynamic = "force-dynamic";


Any Ideas? This is killing me :(
Western paper wasp
I’m using suspense successfully on Vercel but doing it a little differently—I’m using use (https://react.dev/reference/react/use) to unwrap my promise instead of just awaiting it in the server component
My code is something like
import { Suspense, use } from "react";

function SuspenseTest() {
  //sleep for 5 seconds
  const prom = new Promise((resolve) => setTimeout(() => resolve('hi'), 5000));
  const awaitedValue = use(prom);
  return <div>Hello World, I am done sleeping! Value: {awaitedValue}</div>;
};

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Suspense fallback={<div>I AM LOADING</div>}>
        <SuspenseTest />
      </Suspense>
    </main>
  );
}
And in my Vercel deployment, the page loads quickly and the suspense fallback is displayed until the promise resolves.
Harlequin DuckOP
testing right now :)
Western paper wasp
In real life, my usage is inside a much larger app, though, so I’m not sure if there’s other differences elsewhere in the app that make a difference (I haven’t tested the sample I wrote above in isolation)
Let me know if that works out for you
Your example you posted looks to me like it’s pretty similar to this example from the docs, though: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example
But that docs example doesn’t show implementations for the Weather and PostFeed components, though, so not clear whether they’re merely async or whether they use some other mechanism to suspend
I’m not sure whether a <Suspense> boundary is supposed to trigger fallback/streaming for plain async server component
The React docs on suspense suggest maybe not: https://react.dev/reference/react/Suspense
Harlequin DuckOP
:( Nop.
I switched to use from your example but still. Sometimes the Fallback comes very late but most of the times it just never comes up :/
https://next-suspense-test-ten.vercel.app/
But you also see the issue when visiting https://next-suspense-test-ten.vercel.app/ right?
Western paper wasp
no tbh that link works great for me
hahaha
Harlequin DuckOP
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Western paper wasp
What browser are you using?
Harlequin DuckOP
Chrome and Firefox both dont work.
But on a diffrent Laptop only Firefox does not work while Chrome works perfectly fine.
Western paper wasp
oh no haha
Harlequin DuckOP
Wait
Western paper wasp
worst kind of bug
Harlequin DuckOP
Firefox also works there
its my pc 0.0
Western paper wasp
it works on Chrome and Firefox for me and just not on Safari
Western paper wasp
Possibly your PC has some type of software installed that changes network behavior (e.g. some type of VPN or proxy or antivirus that waits for complete network requests before forwarding them?)
Answer
Western paper wasp
that’s not common though as far as I know
Harlequin DuckOP
Well, I will investigate. Thanks tho. I will @ you when I find out whats the cause :)
You still saved my night tho <3
Western paper wasp
awesome
good luck
feel free to mark my answer as solution if you want
Harlequin DuckOP
@Western paper wasp
Do yourself a favour and just don't use Bitdefender.
First of all it's basically impossible to turn that thing of and secondly there is this small tiny feature
Encrypted web scan
Checks the security of encrypted websites. Encrypted websites may use certificates
certificates that have been issued by untrustworthy certification authorities
or stolen from reputable sources.

Which somehow ruins your http streams :/
Turned it off and now everything works. (both use and async/await)

Thanks so so much again for your help. 😊
And also thanks for making me aware of the use() api :)
Western paper wasp
amazing!