DEV Community: Marcos Ivanechtchuk

Server Actions in React with Next.js: A Beginner's Guide

Marcos Ivanechtchuk — Tue, 21 Jan 2025 20:46:49 +0000

Server Actions are revolutionizing the way we build web applications by enabling seamless server-side operations directly from React components. This guide will help you understand what Server Actions are, why they matter, and how to implement them in a Next.js application.

What Are Server Actions?

Server Actions allow you to perform server-side operations such as fetching data, writing to a database, or handling API calls directly from your React components. Unlike traditional client-side operations, Server Actions reduce the amount of JavaScript sent to the client, improving performance and simplifying code.

Key benefits include:

Improved Performance: By handling heavy lifting on the server, you reduce the load on the client.
Simplified Architecture: No need for complex state management libraries in some scenarios.
Enhanced Security: Sensitive operations can be securely handled server-side.

Setting Up a Next.js Project

Let’s start by creating a new Next.js project and preparing it for Server Actions:

Initialize a Next.js Project:

npx create-next-app@latest server-actions-demo
cd server-actions-demo
npm install

Configure the Development Environment: Ensure your Next.js app is using at least version 13.4 or higher to leverage Server Actions. You can verify your version by running:

npm list next

Creating a Server Action

Here’s how you can create and use a Server Action in your app:

Define a Server Action: Add the "use server" directive at the top of the function to indicate server-side execution:

// server side
"use server"
// src/actions/getUser.ts

export async function getUser(userId: string) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    if (!response.ok) throw new Error("Failed to fetch user");
    return response.json();
}

Invoke the Server Action in a React Component: Add the "use client" directive in components designed for the client

// client component
"use client"
import { getUser } from "@/actions/getUser";

export default async function UserPage({ params }: { params: { id: string } }) {
    const user = await getUser(params.id);

    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
}

Best Practices

Efficient Data Fetching: Use Server Actions to handle data fetching securely on the server side.
Error Handling: Always manage errors gracefully to ensure a robust user experience.
Security: Validate all inputs and ensure authentication checks are in place for server-side operations.
Use TypeScript: Strongly type your Server Actions for better maintainability and a smoother developer experience.

Server Actions vs. API Routes: When to Use Each

Server Actions

Server Actions are designed for performing server-side operations directly within React components. They are ideal for:

Tightly Coupled Operations: When server logic is specific to a particular React component.
Reducing Client-Side JavaScript: By executing operations server-side, less code is sent to the client.
Simplified Data Fetching: Eliminating the need for separate API endpoints in many cases.

API Routes

API Routes in Next.js provide a traditional way to create RESTful endpoints. They are best suited for:

Reusable Endpoints: When server logic needs to be reused across multiple components or consumed by external clients.
Complex Logic: When you require advanced request handling, such as middleware or custom headers.
Third-Party Integrations: When exposing APIs for use outside your application.

Choosing Between Server Actions and API Routes

Use Server Actions when the operation is specific to a single React component and can benefit from seamless integration.

Use API Routes when creating endpoints that are reused across multiple parts of your app or are intended for external access.

For more details on API Routes, refer to the Next.js documentation.

Conclusion

Server Actions simplify data-fetching and server-side operations, making your applications more efficient and secure. By leveraging Next.js, you can build modern web apps with ease.

GraphQL vs REST: When to Choose Which for Your Node.js Backend

Marcos Ivanechtchuk — Tue, 03 Dec 2024 23:08:42 +0000

As a developer building APIs, you're often faced with a pivotal choice: should you go with the tried-and-true REST architecture or adopt the more modern GraphQL? Both have their strengths and weaknesses, and the decision depends largely on the needs of your application.

We’ll explore here the key differences between GraphQL and REST, highlight their advantages and drawbacks, and discuss when to choose one over the other for your Node.js backend.

What Is REST?

REST (Representational State Transfer) is a set of architectural principles for designing networked applications. RESTful APIs expose data through endpoints that correspond to resources, typically using HTTP verbs:

GET: Retrieve data.
POST: Create data.
PUT/PATCH: Update data.
DELETE: Delete data.

Key Characteristics of REST:

Stateless: Each request is independent, containing all information needed to process it.
Resource-Oriented: URLs represent resources (/users, /orders).
Uses HTTP Status Codes: Communicates success, failure, or other request statuses.

What Is GraphQL?

GraphQL, developed by Facebook, is a query language and runtime for APIs that allows clients to request only the data they need. Unlike REST, GraphQL has a single endpoint, and the client defines the structure of the response.

Key Characteristics of GraphQL:

Single Endpoint: Typically /graphql.
Flexible Queries: Clients can fetch exactly the data they need.
Strongly-Typed Schema: Defines the structure of the API, making it self-documenting.

GraphQL vs REST: A Feature Comparison

Feature	REST	GraphQL
Data Fetching	Fixed endpoints, over-fetching or under-fetching common.	Flexible queries, fetch only what you need.
Versioning	Requires creating new endpoints (/v1/users).	No versioning; schema evolves with types and fields.
Learning Curve	Familiar for most developers.	Requires learning GraphQL syntax and schema definition.
Performance	Can cause over-fetching/under-fetching.	Efficient for complex data fetching but can stress servers.
Tooling	Tools like Postman, Swagger, OpenAPI available.	GraphQL IDEs like GraphiQL and Apollo Explorer.

Advantages of REST

1. Simplicity

REST APIs follow a predictable pattern and are easy to set up with Node.js frameworks like Express.

2. Widely Adopted

Most developers are familiar with REST, and tooling/support is extensive.

3. Caching

REST can leverage HTTP caching mechanisms for performance optimization.

4. Scalability

Its stateless nature makes REST APIs easier to scale.

Advantages of GraphQL

1. Client-Centric

Clients request exactly the data they need, reducing over-fetching or under-fetching.

2. Single Endpoint

All operations happen through a single /graphql endpoint, simplifying the client-server interaction.

3. Strong Typing and Introspection

GraphQL APIs are self-documenting, thanks to their strongly-typed schema and introspection capabilities.

4. Real-Time Support

GraphQL supports subscriptions for real-time data updates, ideal for live features like chat or notifications.

Disadvantages of REST

1. Over-fetching/Under-fetching

REST endpoints may return too much or too little data, leading to inefficiencies.

2. Versioning

Changes to the API often require creating new versions, which can lead to maintenance challenges.

Disadvantages of GraphQL

1. Complexity

GraphQL introduces a steeper learning curve for developers new to the technology.

2. Overhead on Simple APIs

For straightforward APIs, GraphQL might add unnecessary complexity.

3. Caching Challenges

Unlike REST, GraphQL does not natively integrate with HTTP caching, requiring custom solutions.

When to Choose REST

Simple, Resource-Based APIs: CRUD operations with straightforward data models.
Strong Caching Needs: REST is ideal for APIs that benefit from HTTP caching.
Minimal Client Customization: If clients don’t need tailored responses.
Familiarity and Ecosystem: When your team is more comfortable with REST.

When to Choose GraphQL

Complex Data Requirements: Ideal when clients need flexible queries.
Multiple Frontends: GraphQL works well when serving data to various platforms (web, mobile, etc.).
Real-Time Applications: GraphQL’s subscription feature is great for live updates.
Iterative API Development: Use GraphQL to evolve the API schema without breaking clients.

Implementing REST in Node.js

Install Express:

npm install express

Create a simple REST API:

import express from 'express';  
const app = express();  
app.get('/users', (req, res) => res.json([{ id: 1, name: 'John' }]));  
app.listen(3000, () => console.log('REST API running on port 3000'));

Implementing GraphQL in Node.js

Install Apollo Server:

npm install @apollo/server graphql

Create a GraphQL API:

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const typeDefs = `#graphql
  # This "Book" type defines the queryable fields for every book in our data source.
  type Book {
    title: String
    author: String
  }

  # The "Query" type is special: it lists all of the available queries that
  # clients can execute, along with the return type for each. 
  type Query {
    books: [Book]
  }
`;

// Resolvers define how to fetch the types defined in your schema.
const resolvers = {
  Query: {
    books: () => books,
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`🚀  Server ready at: ${url}`);

Conclusion

Choosing between REST and GraphQL for your Node.js backend depends on your project’s needs. REST is ideal for simplicity, scalability, and caching, while GraphQL shines in flexibility, client-driven data fetching, and real-time capabilities. By understanding their strengths and weaknesses, you can make an informed decision that aligns with your development goals.

Happy coding!