Server Action vs Route Handler

[mint thicket]

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.

[chrome horizon]

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)

[woeful patio]

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()

[simple moth]

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

[mint thicket]

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?

[simple moth]

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.

[mint thicket]

Isn't it better to just fetch data in the server component then pass them to client component?

[simple moth]

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)

[mint thicket]

I see

[mint thicket]

How can i do this?

[simple moth]

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>
  )
}

[hidden bronze]

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

[supple granite]

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

[simple moth]

I remember the docs said it
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-without-starttransition

[hidden bronze]

Hmm interesting, because I do mutation + revalidatePath in an action and just call it in an onClick like that and it works well

[simple moth]

Maybe continue to discuss in #discussions?
I think it's likely a docs problem, 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)

[mint thicket]

okayy, Thank youu!