Server Actions vs API Routes in Next.js

Server Actions and API Routes in Next.js are methods used to communicate with a web server, either by sending data or executing mutations.

Today we will highlight the key differences between server actions and API routes in a table format, along with examples and explanations for each.

So without further ado… Let’s dive right in!

API Routes

API Routes are the traditional way to fetch and send data in Next.js, and they have been around before the release of the Next.js App router.

Here is a basic example of an API route that fetches data from MongoDB and returns it to the frontend:

app/api/items/route.ts

Key points to note:

• The naming convention for API routes is the HTTP method in caps, e.g. GET, POST.
• To access this API you would need to send a GET request to example.com/api/items, which will run the code in this GET handler.
• API routes can conflict with page files, e.g. if you define a page.tsx file inside app/api/items/page.tsx, then this will conflict with the existing route.ts file in the same directory.

Another important point is that webhooks work really well with API routes.

Webhooks are special API routes that can send real-time data to other apps (think stripe webhooks) based on a specific event occuring.

Here is an example of my real Stripe webhook that stores transaction data after a customer purchase:

The reason why API routes are used for webhooks, is because they can be exposed as an endpoint and be triggered easily.

Server actions don't have a predefined endpoint URL, and so can't be accessed in this way.

Server Actions

Server actions have been introduced in Next.js 13 alongside the release of the App router.

The key goal of server actions is to make data mutations easy and bridge the gap between frontend and backend development.

Here is an example of a server action that will authenticate a user with Resend magic links:

Key points to note:

• Server action syntax is simple, you simply add the "use server" directive at the top of the file, and create some functions (e.g. addData, authenticate).
• Server actions have end-to-end typesafety, this means you will know the shape of data sent and received by the server action, which is amazing for developer experience.
• Server actions will never be cached, this is because server actions create a POST HTTP endpoint under the hood, and these aren't cached by Next.js. This is done to prevent CSRF attacks when server actions are used in form submissions.

Table Comparison

This was a brief overview of server actions and API routes in Next.js, with individual examples.

Now lets summarise the key differences in a table, which you can use as a reference whenever you must decide whether an API route or server action is more suitable in certain scenarios:

And here is the dark mode version 😉

Conclusion

I hope you enjoyed this article on server actions vs API routes in Next.js.

I know these concepts have been around for a while now, but I haven't found any clear detailed comparisons between the two, so I decided to fill in this gap and explain these two methods to fetch data.

If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐

References

• API route
• Server Actions
• Segment Config