Server Actions or Route Handlers
Unanswered
White-chinned Petrel posted this in #help-forum
White-chinned PetrelOP
Hi, I am trying to follow NextJS best practices for fetching data. Here is my use case...
Server Component loads a table or results that hits a db file. this is nextjs' recommended method for loading data .
Now, the resulting table is used in a Client Component for frontend adjusting (filtering, sorting, feature gates, other frontend-y stuff).
But, clicking on a row opens a modal that needs to do another fetch for data, using values from the row as inputs in the db query.
This is very neatly and easily done with another server action ("use server" file with fetchModalData function), but seems to go against nextjs' pattern of server actions being for mutations and updates only. I also can implement it with Route Handlers in a /api/modaldata/route.ts file, but what started out as a GET now became a POST due to all the parameters we need to send to fetch the modal data with.
My understanding is that server actions are just POST endpoints that nextJS creates for you, so does this use case support using a server action? or are the route handlers the best pattern here
Appreciate any insight!
Server Component loads a table or results that hits a db file. this is nextjs' recommended method for loading data .
Now, the resulting table is used in a Client Component for frontend adjusting (filtering, sorting, feature gates, other frontend-y stuff).
But, clicking on a row opens a modal that needs to do another fetch for data, using values from the row as inputs in the db query.
This is very neatly and easily done with another server action ("use server" file with fetchModalData function), but seems to go against nextjs' pattern of server actions being for mutations and updates only. I also can implement it with Route Handlers in a /api/modaldata/route.ts file, but what started out as a GET now became a POST due to all the parameters we need to send to fetch the modal data with.
My understanding is that server actions are just POST endpoints that nextJS creates for you, so does this use case support using a server action? or are the route handlers the best pattern here
Appreciate any insight!
5 Replies
@White-chinned Petrel Hi, I am trying to follow NextJS best practices for fetching data. Here is my use case...
Server Component loads a table or results that hits a db file. this is nextjs' recommended method for loading data .
Now, the resulting table is used in a Client Component for frontend adjusting (filtering, sorting, feature gates, other frontend-y stuff).
But, clicking on a row opens a modal that needs to do another fetch for data, using values from the row as inputs in the db query.
This is very neatly and easily done with another server action ("use server" file with fetchModalData function), but seems to go against nextjs' pattern of server actions being for mutations and updates only. I also can implement it with Route Handlers in a /api/modaldata/route.ts file, but what started out as a GET now became a POST due to all the parameters we need to send to fetch the modal data with.
My understanding is that server actions are just POST endpoints that nextJS creates for you, so does this use case support using a server action? or are the route handlers the best pattern here
Appreciate any insight!
Greek Shepherd
Yes u should use a route handler. Use a GET with route segments if you can, but i get that if you have a ton of params, nesting like 30 folders deep isnt very clean. You can use a POST handler but youll be breaking http semantics. I also dont think the browser will cache this
White-chinned PetrelOP
@Greek Shepherd thanks for the response!
Are you saying the browser wont cache the route handler? or the server action? can i use react cache like in the example here? https://nextjs.org/docs/app/getting-started/fetching-data#deduplicate-requests-and-cache-data
Are you saying the browser wont cache the route handler? or the server action? can i use react cache like in the example here? https://nextjs.org/docs/app/getting-started/fetching-data#deduplicate-requests-and-cache-data
@White-chinned Petrel <@373812257601093642> thanks for the response!
Are you saying the browser wont cache the route handler? or the server action? can i use react cache like in the example here? https://nextjs.org/docs/app/getting-started/fetching-data#deduplicate-requests-and-cache-data
Greek Shepherd
The browser wont cache the response of the route handler which the react cache would fix yes. But theres other things in between your server and client that can cache get requests. For example if u expose ur app via a webserver, or proxy through cloudflare. These cache get requests.
So ig it depends on the kind of data ur fetching. If its user specific data it wont matter much but if its a large public dataset ur querying (where many users query the same data) youll lose out on those intermediate caching layers
So ig it depends on the kind of data ur fetching. If its user specific data it wont matter much but if its a large public dataset ur querying (where many users query the same data) youll lose out on those intermediate caching layers
Actuslly i think if ur on vercel i assume they also do caching on their edge network, so youd be losing out on it if u use them too
@White-chinned Petrel Hi, I am trying to follow NextJS best practices for fetching data. Here is my use case...
Server Component loads a table or results that hits a db file. this is nextjs' recommended method for loading data .
Now, the resulting table is used in a Client Component for frontend adjusting (filtering, sorting, feature gates, other frontend-y stuff).
But, clicking on a row opens a modal that needs to do another fetch for data, using values from the row as inputs in the db query.
This is very neatly and easily done with another server action ("use server" file with fetchModalData function), but seems to go against nextjs' pattern of server actions being for mutations and updates only. I also can implement it with Route Handlers in a /api/modaldata/route.ts file, but what started out as a GET now became a POST due to all the parameters we need to send to fetch the modal data with.
My understanding is that server actions are just POST endpoints that nextJS creates for you, so does this use case support using a server action? or are the route handlers the best pattern here
Appreciate any insight!
This is very neatly and easily done with another server action ("use server" file with fetchModalData function), but seems to go against nextjs' pattern of server actions being for mutations and updates only.
Yes
Handlers in a /api/modaldata/route.ts file, but what started out as a GET now became a POST due to all the parameters we need to send to fetch the modal data with.
Why? have you not heard of search params?
My understanding is that server actions are just POST endpoints that nextJS creates for you, so does this use case support using a server action?
Ideally no, since it isn't designed for runtime data fetching. Sure you can use it, but you will find some obstacles around its design to be used with transitions.
not to mention you can't parallel fetch with server action.
Better yet is to either:
1. use GET client component and pass with search params (traditional react way)
2. onClick client component update search params and re-fetch in server component with updated search params (nextjs way)