javascriptreactjsnext.jsnextjs14

What are the benefits of Next.js Server Actions, and why should I use them instead of client-side API calls?


I am working on a Nextjs web application. I am using server actions for fetching data and submitting forms using rest apis in java spring boot. It works great. However, I have a few doubts in my mind and I noticed a couple of drawbacks as well.

For server action, they do not show up in network tab. So, for manual QA it is not possible to see what is being sent to server and what is being returned.

How much of a difference will it make if I ditch server actions and stick with client api calls?

I would appreciate a detailed answer to help me understand this.


Solution

  • SO isn't generally meant for open-ended questions, but I'd like to help.

    When you're using Next.js and Server Actions you are in essence creating yet another server to talk to your Java server. Yes, you could easily switch to client api calls. But, depending on your application requirements, it should probably have a stronger motivation than just to be able to see the api calls in the network tab.

    Why you might prefer server actions:

    1. Privacy. If you can't see anything in the network, neither can any bad actor. This also means that you can worry less about user authentication.
    2. Performance. If you plan to make an API call to your server which in turn relays it to the Java server, that's an extra detour causing slower speeds and more traffic.
    3. More traffic translates to more cost to maintain the server.
    4. Server side rendering is better for SEO, since the pages are pre-rendering and so web crawlers already have all the information needed about your application. (But I'm guessing this is not important for your application.)

    Suggestions for manual testing of server actions:

    1. Simple logging of the requests and responses. You can send these logs to a file or to a dedicated tool like Datadog.
    2. Instead of opening your app in a browser that triggers the backend api call, expose an API endpoint. Then call this endpoint from a tool like Postman.