How to solve this waterfall effect (server action vs route handler)
Unanswered
Alder Flycatcher posted this in #help-forum
Alder FlycatcherOP
I have a webapp, for a page to load it takes 5.3s seconds since its making these other calls before to populate the sidebar and header. How can I avoid this waterfall effect?
Im using server actions to fetch I know they are made for mutations and their sequential behave, im wondering if refactoring all my fetch calls to route handlers would solve this and if so is there any way I can keep typesafety?
Im using server actions to fetch I know they are made for mutations and their sequential behave, im wondering if refactoring all my fetch calls to route handlers would solve this and if so is there any way I can keep typesafety?
POST /funds 200 in 63ms
fetching url api/securities/latest?offset=0&size=10&agg=region&agg=segment&agg=int_rate&agg=tipo_lastro&agg=index&agg=obl_name&obl_id=18
POST /funds 200 in 1696ms
fetching url api/securities/latest?offset=0&size=10&agg=region&agg=segment&agg=int_rate&agg=tipo_lastro&agg=index&agg=obl_name&obl_id=18
POST /funds 200 in 44ms
GET /api/auth/session 200 in 14ms
fetching url /api/items?org=ab0da000-0000-0000-0000-000000000000&user=8488a478-6001-7077-dee8-742d9498e267&keyspace=watchlist
POST /funds 200 in 864ms
fetching url api/search?q=
POST /funds 200 in 872ms
fetching url /api/search?q=
POST /funds 200 in 36ms
fetching url api/v2/portfolios
POST /funds 200 in 5299ms
12 Replies
If you need to do some fetching logic you can extract the logic to a function and call it directly in your server component, then pass the data down to your client component
Consider your server component as your controllers for GETting data, and server actions for mutations.
Alder FlycatcherOP
Right so for example if I have a Sidebar and a Header component that lives within the layout and they both fetch data, then I should move the fetching to the layout and pass it?
Theres no way to have components fetching data without being in sequence but rather in parallel? Considering they live pages apart so I cant promise All them
You can wrap them in Suspense and they will trigger the fallback while fetching their own data in parallel, all this while the parent shows the loading state for both while the fetching completes
If you await in server components you’re forcing it to stop and wait for the data to be resolved
Did that solve your issue?
Alder FlycatcherOP
Hi, ill test it today sorry for not answering it before.
And let you know
Alder FlycatcherOP
Not actually. Ive added a loading state to these calls but still they hang all other calls until its finished
let me be more clear
1. I have a sidebar, in which it fetches data to display on the sidebar
2. I have a header, in which it fetches data to display on the header
3. I have a page from the webapp, that normally fetches data to display on the page.
The third fetch only gets called after the first two finished. And with time going im adding more and more calls to the base layout (sidebar and header), making any page take 10 seconds to load even tho its fetch is <1 second long. Because it had to wait for the sidebar and header to finish its calls to make one
let me be more clear
1. I have a sidebar, in which it fetches data to display on the sidebar
2. I have a header, in which it fetches data to display on the header
3. I have a page from the webapp, that normally fetches data to display on the page.
The third fetch only gets called after the first two finished. And with time going im adding more and more calls to the base layout (sidebar and header), making any page take 10 seconds to load even tho its fetch is <1 second long. Because it had to wait for the sidebar and header to finish its calls to make one
The sidebar and the header are both client components
Are the Sidebar and Header wrapped in <Suspense> when you import and render them in the Layout?