Next.js: Server Actions with React Components

Next.js continues to evolve as a robust full-stack framework for building web applications. Two of its groundbreaking features—Server Actions and React Server Components (RSC)—enable developers to write performant, maintainable, and scalable applications by optimizing server-side logic and client-side interactivity. This guide dives into these features, explaining their use cases and how to integrate them into your Next.js projects.

React Server Components (RSC)

React Server Components are a paradigm shift in how React applications are rendered. RSC allows components to run server-side while still being part of the React tree. This enables faster load times and reduces JavaScript payload on the client.

Key Benefits of RSC

Improved Performance: Server-rendered components minimize client-side JavaScript.
Reduced Bundle Size: By offloading logic to the server, you ship less code to the browser.
Seamless Data Fetching: Fetch data directly within components without additional API calls.

Using React Server Components in Next.js

In Next.js 13 and later, the app directory provides native support for React Server Components.

Example: Fetching Data in a Server Component

// src/app/products/page.tsx

import { fetchProducts } from '@/lib/api';

export default async function ProductsPage() {
  const products = await fetchProducts();

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

In this example:

The fetchProducts function runs server-side.
No JavaScript is sent to the client for this component, reducing the bundle size.

Passing Props to Server Components

You can pass props to server components like regular React components. However, props should ideally be serializable or sourced from server-side logic.

export default function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}

Server Actions

Server Actions simplify server-side logic by enabling functions to run on the server while maintaining the client’s interactivity. This feature is especially useful for scenarios like form submissions, mutations, or any interaction requiring server-side processing.

Key Benefits of Server Actions

Direct Server Communication: Invoke server-side logic without client-side APIs.
Simplified State Management: Handle server updates without complex client-side state libraries.
Security: Logic remains on the server, protecting sensitive operations.

Using Server Actions in Next.js

Setting Up Server Actions

Server Actions work seamlessly with the app directory. Define server functions within components to execute server-side tasks.

Example: Form Submission with Server Actions

'use server';

import { saveData } from '@/lib/db';

async function handleFormSubmit(formData: FormData) {
  const name = formData.get('name');
  await saveData({ name });
}

export default function ContactForm() {
  return (
    <form action={handleFormSubmit} method="POST">
      <input type="text" name="name" placeholder="Your Name" required />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example:

The handleFormSubmit function runs on the server.
No client-side JavaScript is needed for the form submission logic.

Combining Server Actions and React Server Components

Server Actions and RSCs are complementary. Together, they enable clean separation of concerns, reducing client-side complexity while maintaining server-side efficiency.

Example: Dynamic Data Fetching and Mutation

'use server';

import { getItems, addItem } from '@/lib/api';

async function handleAddItem(formData: FormData) {
  const item = formData.get('item');
  await addItem(item);
}

export default async function ItemList() {
  const items = await getItems();

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <form action={handleAddItem} method="POST">
        <input type="text" name="item" placeholder="Add Item" required />
        <button type="submit">Add</button>
      </form>
    </div>
  );
}

Best Practices

Keep Logic Server-Side: Move expensive computations and sensitive logic to server components or server actions.
Optimize Data Fetching: Combine server-side fetching with React’s suspense to streamline rendering.
Minimize JavaScript on the Client: Use server components whenever possible to reduce the client’s JavaScript payload.

Conclusion

Server Actions and React Server Components transform how we build web applications with Next.js. By leveraging these features, developers can create faster, more secure, and scalable applications. With the ability to move logic server-side while maintaining a seamless user experience, Next.js continues to set the benchmark for modern web development.

Server Actions and React Server Components in Next.js

Table of contents