#Best way to fetch data (server actions run sequently)

42 messages · Page 1 of 1 (latest)

sacred adder
#

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.

hot gulchBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

plucky drift
#

well @sacred adder 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?

sacred adder
#

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

plucky drift
#

you can use <Suspense /> with fallback UI @sacred adder

sacred adder
#

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 )

plucky drift
#

not only page itself but you can fetch inside your component!

#

if it's a server component

sacred adder
#

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

plucky drift
#

okay @sacred adder 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?

sacred adder
#

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.

plucky drift
#

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 />

sacred adder
#

For example:

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

plucky drift
#

can't you pass an array of StatusLinkBox as a children?

#

like

<Grid>
  <StatusLinkBox />
  <StatusLinkBox />
  <StatusLinkBox />
</Grid>```
#

then StatusLinkBox can be a server component

sacred adder
#

Isn't that how I do it right now?

image.png
#

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

plucky drift
#

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

sacred adder
#

Oh I see

#

So use {children} in the grid

#

and in the parent company put the StatusLinkBox

plucky drift
#

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 ⬆️

sacred adder
#

That makes so much sense

#

Thank you so much!