Server Actions vs API Routes Question
Answered
Polar bear posted this in #help-forum
Polar bearOP
Hey everyone, I built my first fullstack app and am going back to do some work on it. I'm still a noob and used Server Actions for both fetching and mutating data and my question is should I refactor my app to use API Routes for fetching data and SA for mutating? I recently learned I've been doing it wrong.
From my research it seems the best practice is to separate and that the key issue is that SA are POST reqs which when fetching data, it should be a GET req to fall in line with the RESTFUL pattern. Cache revalidation is a pain in the butt when trying to be granular. My question here is is the paradigm moving towards using only SA or should this separation always be observed. I organized my SA in a CRUD pattern. I also plan to build a mobile app one day. Do you guys recommend building the API route on NextJS or is there something you recommend?
This is a lot. Thank you for reading.
From my research it seems the best practice is to separate and that the key issue is that SA are POST reqs which when fetching data, it should be a GET req to fall in line with the RESTFUL pattern. Cache revalidation is a pain in the butt when trying to be granular. My question here is is the paradigm moving towards using only SA or should this separation always be observed. I organized my SA in a CRUD pattern. I also plan to build a mobile app one day. Do you guys recommend building the API route on NextJS or is there something you recommend?
This is a lot. Thank you for reading.
Answered by joulev
it's mainly whether you want to do client side data fetching or server side data fetching. if you use server components to get data, then use server actions to mutate that data. if you use react-query/swr to get data, you should also use api routes with the mutation hooks of these libraries to mutate data
5 Replies
@Polar bear Hey everyone, I built my first fullstack app and am going back to do some work on it. I'm still a noob and used Server Actions for both fetching and mutating data and my question is should I refactor my app to use API Routes for fetching data and SA for mutating? I recently learned I've been doing it wrong.
From my research it seems the best practice is to separate and that the key issue is that SA are POST reqs which when fetching data, it should be a GET req to fall in line with the RESTFUL pattern. Cache revalidation is a pain in the butt when trying to be granular. My question here is is the paradigm moving towards using only SA or should this separation always be observed. I organized my SA in a CRUD pattern. I also plan to build a mobile app one day. Do you guys recommend building the API route on NextJS or is there something you recommend?
This is a lot. Thank you for reading.
server components for queries and server actions for mutations (server side data fetching)
or
api routes for queries and api routes for mutations (client side data fetching)
or
api routes for queries and api routes for mutations (client side data fetching)
Polar bearOP
Some additional context, I am using a MySQL db with planetscale and Prisma as the ORM, idk if that changes anything with this
no changes. same thing still applies.
Polar bearOP
Ah ok I think this is starting to make sense, thank you
Server actions are for fetching/mutating data in server components
API routes fetching/mutating in client components
The practical difference between API routes and SA is whether you are using a client component or several component
Server actions are for fetching/mutating data in server components
API routes fetching/mutating in client components
The practical difference between API routes and SA is whether you are using a client component or several component
it's mainly whether you want to do client side data fetching or server side data fetching. if you use server components to get data, then use server actions to mutate that data. if you use react-query/swr to get data, you should also use api routes with the mutation hooks of these libraries to mutate data
Answer