Next.js Discord

Discord Forum

Server Action vs Route Handler

Answered
Carolina Dog posted this in #help-forum
Open in Discord
Carolina DogOP
I'm wondering, when should we use server actions instead of route handler? And when should we use route handler instead of server actions? (In nextjs 13). Thank you.
Answered by fuma
Route handlers are used for building normal API endpoints, e.g. GET, POST, PUT.
They are stable and recommended for implementing APIs in your Next.js application.
Also, route handlers support more advanced usage. You can have [segment configurations](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config) or dynamic segments in the handlers.
Read the docs for further information.

Server actions are currently in beta, and we usually use it in forms.
return <form action={action}>
  ...
</form>


Generally, we will use route handlers when fetching data from the client side (or clients-side revalidation), and use Server Actions for mutations.
View full answer

20 Replies

@Carolina Dog I'm wondering, when should we use server actions instead of route handler? And when should we use route handler instead of server actions? (In nextjs 13). Thank you.
Netherland Dwarf
If you need a response then you should use route handler (to show some errors for example), otherwise you can use server action combined to revalidate and router.refresh()
fuma
Route handlers are used for building normal API endpoints, e.g. GET, POST, PUT.
They are stable and recommended for implementing APIs in your Next.js application.
Also, route handlers support more advanced usage. You can have [segment configurations](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config) or dynamic segments in the handlers.
Read the docs for further information.

Server actions are currently in beta, and we usually use it in forms.
return <form action={action}>
  ...
</form>


Generally, we will use route handlers when fetching data from the client side (or clients-side revalidation), and use Server Actions for mutations.
Answer
@Netherland Dwarf If you need a response then you should use route handler (to show some errors for example), otherwise you can use server action combined to revalidate and router.refresh()
Carolina DogOP
So does that mean the server actions is only good for mutations and when we don't need to show errors? Otherwise better to use route handler?
fuma
Actually server actions can return something to the client
but anyway it's still recommended to use route handlers with libraries like React Query for client-side data fetching.
@fuma but anyway it's still recommended to use route handlers with libraries like React Query for client-side data fetching.
Carolina DogOP
Isn't it better to just fetch data in the server component then pass them to client component?
fuma
But it's common that people want more advanced revalidation options (as you know there are a lot of issues currently about caching)
In these cases, we will prefer client-side revalidation instead
Whenever possible, just pass the data from server components and you won't need to create a route handler at all.
(but it's not client-side fetching anymore)
@fuma Actually server actions can return something to the client
Carolina DogOP
How can i do this?
fuma
just return a value in the server action, and receive it using useTransition
If you're not using mutations in the server action, you can even invoke it directly in a client component:
'use client'
// from a file with "use server"
import { myAction } from './actions'

export function HelloWorld() {
  return (
    <button onClick={() => myAction().then(res => console.log(res))}>
      Start
    </button>
  )
}
joulev
I’m fairly sure you can do that even when you use mutations in server actions too
Because I’m doing exactly that in one of my apps
Polar bear
Server Actions can return a response, just like Route Handlers. If you use server actions for mutation, you don't have to do router.refersh, but with route handlers, you will need to call router.refersh for mutation, see official docs https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
joulev
Hmm interesting, because I do mutation + revalidatePath in an action and just call it in an onClick like that and it works well
fuma
Maybe continue to discuss in #discussions?
I think it's likely a docs problem, [useTransition](https://react.dev/reference/react/useTransition) doesn't affect how you invoke a server action, and as I know there's nothing prevents you to use it without startTransition.
It's like converting a sync function to async instead (making it non-block)
Carolina DogOP
okayy, Thank youu!