This has nothing to do with React or NextJS for that matter. Once requests appear in the network tab the only parties involved are chrome the physical client and your server.
I'm nearly 100% sure isssue will be one of following:
1: **Issue is on client** (partially because of server). The most common cause for this Iv'e seen that catches alot of people out is if you're hosting your backend on a setup that only supports **http/1 this is very important because chrome will only allow 6 concurrent outgoing connections to http/1 servers causing the waterfall seen here. Iv'e personally worked on projects using http/1 who have network tabs that look like this.** The easiest way to debug this is to right click the column header text in the network tab and add "protocol" and make sure that those requests are not going out over http/1.
If this is only happening on your localhost and its http/1 this is very normal and will go away when you host your application say on Vercel
2: **The issue is on the server,** this can be caused if the server is resolving the requests sequentially.
1: If you're using Node on backend could be each request consumes 100% of the main thread for 100% of the duration of the request resulting in the waterfall seen here. **(non blocking IO model)**
2: If you're using a different language on the backend then could be that it's only utilizing a single thread and therefore blocks that thread while the request is in progress **(blocking IO model - I.E Java)**
Let me know if this helps. Happy to help debug more.
Yes you are right. The issue is that the server is taking too long to handle the requests \`Waiting for server response\` and when it reach 6 request it starts to answer 1 by 1 which is causing what we see in the video.
This is happening in production too. We are hosting both backend and frontend in Azure
yes this is a user page and we are loading the user data in the page and then the selects with the inputs to change that data is being fetched with useAxios i.e I use fetch to gather all the countries options and so on
Not used useAxios, but in my solution i just today remove all server actions, as they do their work synchronously, so when i triggered a lot of changes it would finish them one after another, so changed it to router/api and now i can trigger in parallel again. And by server action i mean if you have some logic in the action folder.
I have an application in **NextJS 14** I'm using app router
My issue is that I get this waterfall of request. I've been reading and this happens in react usually when a parent component make a request that renders a children that make a request and so on... but that's not my case, I believe.
I'm using `MUI` and on each component ie `CountrySelect` I'm doing a fetch with `useAxios` hook. And then I have a sibling doing the same for.. let's say clubs... relatives, etc.
I'm thinking that maybe this issue is generated by `react-hook-forms` since I have to encapsulate my MUI components in a Controller component, can that be the problem?
The code structure from page to the selects that makes the requests looks like this...
Page rendering SSR data:
{data ? (
<>
) : (
)}
A tab requesting the options where the waterfall happens:
SelectCountrInput makes a request of the countries with axios:
const SelectCountryInput = ({
formInputsProps,
isEditing = true,
}: A15FormSelectDivisionInputProps) => {
const [{ data: optionsRes, loading }] = useAxios({ url: "/api/countries", method: "OPTIONS" });
return (...)
}
Are those duplicate? Caching issue? What if you try using fetch instead.
Or preferably load all the data at once and then pass to components what they need.
You should activate http2 handling on your server.you can see if its working if instead of xhr there is h2 in the colum. Http2 can help massive with waterfalls as it reuses open connections to load resources. Also it can have open up 10 i think? Open connections at the same time. So your app loads much faster.
I am not sure exactly how you define server. But server is always the backend. :) And if you have two Servers for example an server your next app talks to and an server your next server talks to you have to activate it always on the server your Client (The Browser in this case) talks to. The Browser will use it by itself if its possible.
I’d set this up: https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry
It’s very good and lets you record / visual with all of the requests in your app.
Personally, I’d stick with native browser APIs for more control and less issues.
I’d also see which (if any) of those requests can be cached, can be done at once with promise.all and maybe do so some smarter queries depending on how you’re doing those.
We start debugging and the issue is in the Laravel server. We have nextjs API communicating with a laravel cloud server of us and we find out that is taking too long to respond... about 1s for a single request with no DB connection and about 2s when It connects to the db so when the client reach six pending requests it start to stack them and it start solving one by one.
When we upgrade the machine in Azure those numbers goes down to half each but we are still looking for a solution since it's super weird that the server despite it's not a great machine takes 1s to respond a ping.
in the video in the last column there's the request waterfall as you can see each request waits for the previous to end to start and I want to avoid that
You want to set prefetch={false} on Link components?
Not the case, this requests are loaded after page load and the page load is rendered on the server so that's fine
This has nothing to do with React or NextJS for that matter. Once requests appear in the network tab the only parties involved are chrome the physical client and your server. I'm nearly 100% sure isssue will be one of following: 1: **Issue is on client** (partially because of server). The most common cause for this Iv'e seen that catches alot of people out is if you're hosting your backend on a setup that only supports **http/1 this is very important because chrome will only allow 6 concurrent outgoing connections to http/1 servers causing the waterfall seen here. Iv'e personally worked on projects using http/1 who have network tabs that look like this.** The easiest way to debug this is to right click the column header text in the network tab and add "protocol" and make sure that those requests are not going out over http/1. If this is only happening on your localhost and its http/1 this is very normal and will go away when you host your application say on Vercel 2: **The issue is on the server,** this can be caused if the server is resolving the requests sequentially. 1: If you're using Node on backend could be each request consumes 100% of the main thread for 100% of the duration of the request resulting in the waterfall seen here. **(non blocking IO model)** 2: If you're using a different language on the backend then could be that it's only utilizing a single thread and therefore blocks that thread while the request is in progress **(blocking IO model - I.E Java)** Let me know if this helps. Happy to help debug more.
Yes you are right. The issue is that the server is taking too long to handle the requests \`Waiting for server response\` and when it reach 6 request it starts to answer 1 by 1 which is causing what we see in the video. This is happening in production too. We are hosting both backend and frontend in Azure
are you using any server actions in there some where?
yes this is a user page and we are loading the user data in the page and then the selects with the inputs to change that data is being fetched with useAxios i.e I use fetch to gather all the countries options and so on
Not used useAxios, but in my solution i just today remove all server actions, as they do their work synchronously, so when i triggered a lot of changes it would finish them one after another, so changed it to router/api and now i can trigger in parallel again. And by server action i mean if you have some logic in the action folder.
Maybe use useAxios on parent component to not fetch it on multiple child components
I have an application in **NextJS 14** I'm using app router My issue is that I get this waterfall of request. I've been reading and this happens in react usually when a parent component make a request that renders a children that make a request and so on... but that's not my case, I believe. I'm using `MUI` and on each component ie `CountrySelect` I'm doing a fetch with `useAxios` hook. And then I have a sibling doing the same for.. let's say clubs... relatives, etc. I'm thinking that maybe this issue is generated by `react-hook-forms` since I have to encapsulate my MUI components in a Controller component, can that be the problem? The code structure from page to the selects that makes the requests looks like this... Page rendering SSR data:
{data ? (
<>
A tab requesting the options where the waterfall happens:
SelectCountrInput makes a request of the countries with axios:
const SelectCountryInput = ({
formInputsProps,
isEditing = true,
}: A15FormSelectDivisionInputProps) => {
const [{ data: optionsRes, loading }] = useAxios({ url: "/api/countries", method: "OPTIONS" });
return (...)
}
"useAxios" sounds very much like client side data fetching
use server actions
How are you making the requests? In a useEffect?
No, we are using useAxios hook it looks like this const [{ data, loading, error }, refetch] = useAxios( 'https://reqres.in/api/users?delay=1' )
So even though the components are getting rendered at the same time, it seems like Axios is only making 1 request at a time?
Are those duplicate? Caching issue? What if you try using fetch instead. Or preferably load all the data at once and then pass to components what they need.
You should activate http2 handling on your server.you can see if its working if instead of xhr there is h2 in the colum. Http2 can help massive with waterfalls as it reuses open connections to load resources. Also it can have open up 10 i think? Open connections at the same time. So your app loads much faster.
thanks! Is it a feature in the backend server in the frontend? or both servers needs to activate
I am not sure exactly how you define server. But server is always the backend. :) And if you have two Servers for example an server your next app talks to and an server your next server talks to you have to activate it always on the server your Client (The Browser in this case) talks to. The Browser will use it by itself if its possible.
Sent you a DM, I might have a solution
I’d set this up: https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry It’s very good and lets you record / visual with all of the requests in your app. Personally, I’d stick with native browser APIs for more control and less issues. I’d also see which (if any) of those requests can be cached, can be done at once with promise.all and maybe do so some smarter queries depending on how you’re doing those.
We start debugging and the issue is in the Laravel server. We have nextjs API communicating with a laravel cloud server of us and we find out that is taking too long to respond... about 1s for a single request with no DB connection and about 2s when It connects to the db so when the client reach six pending requests it start to stack them and it start solving one by one. When we upgrade the machine in Azure those numbers goes down to half each but we are still looking for a solution since it's super weird that the server despite it's not a great machine takes 1s to respond a ping.
That’s pretty crazy for the Laravel API to be taking that long! Is the server / data storage in the same region etc? This can increase latency a lot.
Why do you use react 14 and not react 18?
Yes I'm using Next which uses React 18 :)
what is waterfall please explain
in the video in the last column there's the request waterfall as you can see each request waits for the previous to end to start and I want to avoid that