Best way to fetch data (server actions run sequently)
Answered
Dwarf Crocodile posted this in #help-forum
Dwarf CrocodileOP
Hi everyone! I am trying to find a way to correctly fetch data to the server from a client component.
What I have:
A website that fetches data of different websites (needs to be server sided because of cors) through server actions
Shows a loading spinning wheel in that specific website box.
Once receives the result it than shows the result instead of the spinning wheel
My issue:
My issue is that the request through server-action happens sequently. This means the next request will only be sent after the one before was received. This makes the websites data to fetch like this:
First the first one
Than the next one
Than the next one
When it should render send all the requests at the same time and when it receives shows up the data. No matter the order. No need to wait to the reception of the fetch before showing up the result.
What I have:
A website that fetches data of different websites (needs to be server sided because of cors) through server actions
Shows a loading spinning wheel in that specific website box.
Once receives the result it than shows the result instead of the spinning wheel
My issue:
My issue is that the request through server-action happens sequently. This means the next request will only be sent after the one before was received. This makes the websites data to fetch like this:
First the first one
Than the next one
Than the next one
When it should render send all the requests at the same time and when it receives shows up the data. No matter the order. No need to wait to the reception of the fetch before showing up the result.
Answered by James4u (Tag me if needed)
like
<Grid>
<StatusLinkBox />
<StatusLinkBox />
<StatusLinkBox />
</Grid>40 Replies
well @Dwarf Crocodile that's the only case not to use server action for data fetching. Server action was originally designed & recommened for data mutation not data fetching
why don't you just fetch them all on the server side?
Dwarf CrocodileOP
I could pass the data from the page down to the component. But how would I do it to send loading while the data did not arrive yet
I currently use useState with a object inside with all the parameters I want. If a parameter is not there its showing loading if it is it shows the result.
But useState is csr
you can use <Suspense /> with fallback UI @Dwarf Crocodile
Dwarf CrocodileOP
Just wondering what would be better: just creating a route that when requested fetches the data I need and delivers back the data to the client or just fetching the data in the server component ( the page itself )
not only page itself but you can fetch inside your component!
if it's a server component
Dwarf CrocodileOP
My component is a client component because I am using dndkit
A drag and drop library that I could only get it to work in the client side
okay @Dwarf Crocodile let's break it down
you said you have 3 apis - let's assume you have 3 apis
are they independent one? and those 3 components that consumes those 3 apis, are they all different UI?
Dwarf CrocodileOP
So basically I am doing a web app that checks the status of multiple services and some stats of them. The amount of services vary. Each web app has a component with a few child components.
yeah, so why not 3 server components that fetches data on the server side
and pass down response data to 3 client components
and in the page, you can wrap your 3 server components with <Suspense />
Dwarf CrocodileOP
For example:
I have:
Grid component (client to make dndkit work)
--StatusLinkBox (each service)
----StatusParameters (parameters inside the service box)
------LoadingValue (each parameter)
I have:
Grid component (client to make dndkit work)
--StatusLinkBox (each service)
----StatusParameters (parameters inside the service box)
------LoadingValue (each parameter)
Because Grid Component is client I am pretty sure all the child components are aswell
can't you pass an array of StatusLinkBox as a children?
like
<Grid>
<StatusLinkBox />
<StatusLinkBox />
<StatusLinkBox />
</Grid>Answer
then
StatusLinkBox can be a server componentDwarf CrocodileOP
Isn't that how I do it right now?
Doesn't this force StatusLinkBox to be client side? Or am I just wrong xD? Still finding the way nextjs handles client/server side pretty confusing
Used to just do a expressjs app where it was pretty obvious what was client sided and server side
well in the current codebase, it forces <StatusLinkBox /> to be a client component
Create a container that wraps a list of <StatusLinkBox />
Copy and paste in a good format so that you can get more help!! - when you share your codebase
Dwarf CrocodileOP
Oh I see
So use {children} in the grid
and in the parent company put the StatusLinkBox
yeah, sort of
then you can have your <StatusLinkBox /> being a server component - and you can make a data fetching there
and don't forget to wrap it by <Suspense />
similar to ⬆️
Dwarf CrocodileOP
That makes so much sense
Thank you so much!