How to use Server Actions with NextJS

Nowadays, performance and efficiency have become major concerns. Users are increasingly demanding about their experience when spending time on a website.

To further optimize page load performance, we now have a magical feature: Server Actions.

They allow data management directly on the server, while simplifying client-side page loading.

Understanding Server Actions

Server Actions, as mentioned, are one of Next.js's flagship features. They enable executing instructions on the server directly from components (even Client Components).

Unlike methods like getServerSideProps or getStaticProps (deprecated as of Next.js 13), Server Actions integrate directly into components without requiring dedicated pages or complex hooks.

Why Use Server Actions?

Using Server Actions offers several benefits:

1. Improved Performance: By executing code directly on the server, client-side load is reduced, significantly improving load times.
2. Simplified Code: Server Actions eliminate the need to create separate API files or use functions like getServerSideProps. Everything can now be managed within the components themselves.
3. Reduced Client-Side JavaScript: Since most of the work is done server-side, the size of the JavaScript bundle sent to the client is smaller, speeding up the application.

Setting Up Server Actions in Next.js

Initializing a Next.js Project

If you're new to Next.js, here’s how to initialize a project:

npx create-next-app@latest

During initialization, you can choose between the app or pages router. Choose the app router. It’s the latest router offered by Next.js, enabling better application structure and full use of Server Components and Server Actions.

Configuring Server Actions

Server Actions are used directly within components. Simply mark a function with the async attribute to use it as a Server Action.

Example: In a Server Component

Server Components can use:

• Inline functions
• Modules with "use server"

Here’s an example using an inline function:

export default function Page() {
    // ...

    // Server Action
    async function create() {
        "use server";
        const res = await fetch('https://believemy.com');
        // ...
    }

    return (

    );
}

In this example, we dynamically fetch data for an article. This approach greatly simplifies data flow while reducing the amount of client-side code executed.

Example: Using Modules

For modular use, create a new file and include the use server directive. All functions in this file are treated as Server Actions.

'use server';

export async function create() {
    // ...
}

export async function replace() {
    // ...
}

To use the Server Action, include the following in a Server Component:

import { create } from "./actions";

export default function ServerComponent() {
    return;
}

The action attribute informs Next.js to use a Server Action. It sends all form data to the server when the user submits the form.

Example: In a Client Component

Client Components can only use modules for Server Actions. Using the previous actions.jsx example:

'use client';

import { create } from "./actions";

export default function ClientComponent() {
    return;
}

API Routes vs. Server Actions

With the advent of Server Actions, many developers wonder if API Routes are still necessary.

With Server Actions, these dedicated routes are mostly unnecessary, as you can handle requests directly in components.

Here’s a summary:

When to Use API Routes:

• When you need to expose API endpoints for external services.
• To centralize server logic in a single file.

When to Use Server Actions:

• When data retrieval is directly tied to component rendering.
• To optimize performance and simplify code by avoiding additional client API requests.

FAQ on Server Actions

Our learners often ask questions about Server Actions. Here’s a quick summary of the most insightful ones:

Ensure proper server-side error handling and only use Server Actions when truly necessary. Otherwise, they can add unnecessary complexity to your code.

No, they even improve SEO by speeding up page rendering.

Yes, Server Actions are great for interacting with external APIs. It also ensures API keys stay secure!

Yes, for cases where you need to expose an API to external services. However, Server Actions suffice for most use cases.

With our course! 😇 You can find it here.