Server component <Suspense /> not showing Instant Loading States when accessed through proxy #50377
Replies: 3 comments 4 replies
-
|
I think I figured it out, it seems like I need to have http streaming enabled |
Beta Was this translation helpful? Give feedback.
-
|
@cherealnice I'm running into a similar issue. I see you mentioned it may have to do with enabling the http streaming but not really get it. Can you please help me? |
Beta Was this translation helpful? Give feedback.
-
|
My problem stemmed from the fact that I was running a proxy in between the frontend and nextjs node server. Do you have a similar setup? |
Beta Was this translation helpful? Give feedback.
-
|
yes
…________________________________
From: Dan Cherouny ***@***.***>
Sent: Tuesday, August 8, 2023 11:53:58 AM
To: vercel/next.js ***@***.***>
Cc: ammar91 ***@***.***>; Comment ***@***.***>
Subject: Re: [vercel/next.js] Server component <Suspense /> not showing Instant Loading States when accessed through proxy (Discussion #50377)
My problem stemmed from the fact that I was running a proxy in between the frontend and nextjs node server. Do you have a similar setup?
—
Reply to this email directly, view it on GitHub<#50377 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AB2T7ARWXS2TYOGPJQPBKOTXUHPANANCNFSM6AAAAAAYP42S7U>.
You are receiving this because you commented.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
In my proxy, I was reading the response to parse the content before sending it to the frontend. This caused the response to not be sent as a stream, which is how it should be sent with react server components. This article helped a lot https://blog.logrocket.com/streaming-ssr-with-react-18/ |
Beta Was this translation helpful? Give feedback.
-
|
Do you have any solution? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I changed my server code to not parse the response before forwarding it to the frontend app, so it was able to forward the content as a stream |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello,
I'm currently building a new NextJS app from scratch using the app router. Currently, I am prefetching some data in my global layout, and I have a Suspense boundary around the data fetching component like this:
The problem is that when I access my app directly (http://localhost:3000), I do see the loading state, but when I access it through a proxy, I do not see the suspense boundary and I just get a blank page until the prefetches are complete.
I've done some digging and it looks like the requests to the next server (incl. headers) do not change when accessing through proxy. Is there something else that I need to configure on the proxy?
Beta Was this translation helpful? Give feedback.
All reactions