Comparison of Server Actions, trpc, GraphQL, and REST

#nextjs #trpc #graphql #restapi

Whenever the topic of server actions comes up, inevitably folks ask, "Well, now that we have server actions and something like Next.js, do we even need stuff like trpc, GraphQL, or REST?" And that's actually a complex question.

So, in this blog, we are going to compare server actions to trpc, GraphQL, and REST and give you some insights into which might be the best choice for your project.

Let's get right into it.

Introduction to Four Different Paradigms

Server Actions: Functions defined on the server using the useServer pragma in Next.js 14. Invoked from the client by calling the function. Frameworks like Next.js, Remix, Solid Start, or Quick manage the flow of making the call.
trpc (Typesafe Remote Procedure Calls): Defines remote procedure calls exposed by the server. Automatically creates query hooks and handles marshalling between the API endpoint and the function.
GraphQL: A query language created by Meta. Sits on top of HTTP and JSON. Uses a query language to specify queries or mutations. Provides a standard format for requests.
REST (Representational State Transfer): An architectural style that defines entities in a hierarchical structure. Less formal and standardized compared to other options. Frameworks like Next.js, Remix provide ways to create REST API endpoints.

Comparison of Advantages and Disadvantages

Ease of Setup

Server Actions: Built-in and easy to set up in Next.js 14. No additional configuration required.
trpc: Fairly easy to set up with good documentation.
GraphQL: Can be challenging to set up. Requires configuring API endpoints and potentially using tools like a GraphQL code generator for type safety.
REST: Easy to set up in most frameworks like Next.js, Remix using API endpoint routes.

Ease of Use

Server Actions: Extremely easy to use. Just call the defined functions on the client, and the framework handles the request and response.
trpc, GraphQL: Relatively easy to use. Querying the endpoint using hooks or queries.
REST: Convenient for simple queries, but not as straightforward as server actions.

Mutations

Server Actions: Designed for mutations, so they excel in this area.
trpc, GraphQL: Support mutations with type safety, making them straightforward to use.
REST: Easy to perform mutations but lacks standardization, as you define the API structure yourself.

Queries

Server Actions: Not ideal for queries, as they focus on server-side actions.
trpc, GraphQL: Well-suited for queries. Query hooks or the GraphQL query language simplifies querying.
REST: Excellent for queries, as creating a GET endpoint is easy.

Type Safety

Server Actions: Type safe out of the box.
GraphQL: Enables introspection against the server to generate types based on the schema, making it highly type safe.
REST: Lacks inherent type safety. Requires additional setup or manual type definitions.

Compatibility

Server Actions: Limited compatibility beyond the framework's environment. Mobile or desktop clients may need to imitate server action behavior based on the wire format.
trpc: Good compatibility within TypeScript-based applications (e.g., React Native and web).
GraphQL: Excellent interoperability as it adheres to a standardized API.
REST: Compatible with most clients but lacks standardized request formats.

JavaScript Dependency

Server Actions: Can work without JavaScript enabled on the client, as they use form posts.
trpc, GraphQL, REST: Require JavaScript on the client.

Recommendations

Based on the current state as of late 2023, here are some recommendations:

For simple Next.js web applications, using a combination of queries on the server in React Server Components and server actions is the easiest approach.
If you also need to support mobile or desktop clients, consider using trpc, especially if it's a TypeScript-based application.
For internal or internet apps, GraphQL can be a suitable choice due to its excellent server and client support. However, be cautious about potential denial-of-service issues for high-traffic scenarios.
REST is convenient for simple queries but lacks the advantages of type safety and standardization found in other options.

But still end decision lies in your hand, feel free to use whatever you like and feel comfortable with.

Happy Coding!