personally i dont see that much of an issue with it, but be warned that they arent parallel (if you run 2 at same time they run one by one)

and yeah caching isnt as much for server actions, as they are kinda designed for mutating more

Yep, the more i read the more i understand. Every request is POST and POST reqs are not cached. I just have bunch of dropdowns for country names, that dont need refetching all the time.

Maybe i need to use Swr or React Query?

honestly, can you just have that built into the page itself instead of a client query?

You mean just make fetch call inside the component?

ye, server side - and then hard code, fetch cache, or unstable_cache depending on how you get that

So, in a client component i should make a get request, like how i would in react, then just use that, how come this is server side though when it occurs in a client component? Still figuring things out.

oh if its client then you client fetch, but you can give it props from server or do page from server to include the server data

Can you give me a small snippet, or an example? I am having hard time to paint it. I have been using server actions to make GET requests but since all of them are POSTS, i cannot cache them. Now, i will keep all of my mutations in Server Actions, but now i need to make all GET requests inside a client component?

And i am using a .net core backend btw

why don't you just do server side data fetching and pass down to the children?

if you want to make a client side data fetching - I would recommend use swr or react query

I remember I saw a blog demonstrating server action + react query

Hmm, i dont need server actions for this? Just in a parent i do something like fetch() get and pass it down?

swr would work pretty easy for it also, as in swr you give it the fetcher function wich usually is () => fetch... so you can just make it the action function

server actions are originally designed for mutation

why not?

^

https://www.robinwieruch.de/next-server-actions-fetch-data/
@Polar bear Take a look at this blog

Allright i think i got a hang of it further.

I am trying to build a template for the place i work, i set up most things, basically everything with fetch api and server actions and it is working pretty well... Until i hit the wall with caching. I will first try what you suggested first and if it works i will just leave it. Then maybe i can try to add react query

Thanks, i have read it previously but i guess he does not mention that GET requests with server actions are not cached

Hi! Maybe it's interesting for you, three possibilities I like to fetch data with RSC:

https://codesandbox.io/p/devbox/wispy-butterfly-dcddqw

fetch pattern:
- p1: fetch data server side with suspense using an <Await> component
- p2: fetch data server and pass promise as a prop to useSuspenseQuery
- p3: fetch data from client (useQuery) with an api route

Hey, thanks for all the help.
NOTE: Apologize for all the typos 😢

Hey some updates, i have wrapped all of the page with suspense, so the page is shown until all the data is fetched, and i think this is very user friendly lol. When page was renderes and dropdowns still showing loading icons... it feels kind of strange tbh. This way everything is just there for user.

Second of all,(here comes another question) i used react query for city select. When user selects a city, react query fn is fired which then takes in the city id and fetches accordingly. However, i was forced to use Server Actions here. But i am a bit puzzled, when i add "use server" to a file and define a fetch function inside, it becomes a server action right?

For all the get methods, i have not used server actions and they work fine, but for my province fetch(based on city id) with react query i have to use server actions otherwise nextjs yells at me headers was called outside of request scope... Am i doing, or thinking wrong in this?