Boosting Efficiency with Server Actions: Best Practices

I want you to read this article because as a front-end developer, I find this concept very interesting. So, here we are!

‍

What are Server Actions?

Next.js's server actions are an alpha feature developed on top of React Actions. They allow for server-side data modifications, reduced client-side JavaScript, and gradually improved forms. They can be defined within Server Components and/or accessed through Client Components.

Here's an example of how you might use server actions with Server Components:

import { cookies } from 'next/headers'

export default function AddToCart({ productId }) {
  async function addItem(data) {
    'use server'

    const cartId = cookies().get('cartId')?.value
    await saveToDb({ cartId, data })
  }

  return (
    <form action={addItem}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

And here's an example of how you might use server actions with Client Components:

'use server'

export async function addItem(data) {
  const cartId = cookies().get('cartId')?.value
  await saveToDb({ cartId, data })
}

'use client'

import { addItem } from './actions.js'

export default function AddToCart({ productId }) {
  return (
    <form action={addItem}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

‍

Why Use Server Actions?

Server actions allow you to perform data mutations on the server side, reducing the amount of client-side JavaScript needed. This can lead to performance benefits, as it reduces the amount of data that needs to be sent over the network and processed by the client.

One of the key benefits of server actions is that they automatically create an endpoint for Next.js to use behind the scenes. This means you don't have to manually create an API endpoint every time you want to perform a server action.

Server actions also support the concept of progressive enhancement. This means that your forms can still function properly even if JavaScript is disabled or fails to load.

‍

How to Enable Server Actions?

By enabling the experimental serverActions flag in your next.config.js file, you can enable server actions in your Next.js project:

module.exports = {
  experimental: {
    serverActions: true,
  },
}

‍

How to Define Server Actions?

Server actions can be defined in two places: inside the component that uses it (Server Components only), or in a separate file (Client and Server Components), for reusability. You can define multiple server actions in a single file.

Here's an example of how you might define a server action inside a Server Component:

export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ...
  }
}

And here's an example of how you might define a server action in a separate file:

'use server'

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

'use client'

import { myAction } from './actions.js'

export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

‍

How to Invoke Server Actions

You can invoke server actions in several ways:

Using action: React's action prop allows invoking a Server Action on a <form> element. Here's an example:

import { cookies } from 'next/headers'

export default function AddToCart({ productId }) {
  async function addItem(data) {
    'use server'

    const cartId = cookies().get('cartId')?.value
    await saveToDb({ cartId, data })
  }

  return (
    <form action={addItem}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

Using formAction: The formAction prop in React allows you to handle button>, input type="submit">, and input type="image"> components in a form>. The formAction prop takes precedence over the action of the form.

export default function Form() {
  async function handleSubmit() {
    'use server'
    // ...
  }

  async function submitImage() {
    'use server'
    // ...
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <input type="image" formAction={submitImage} />
      <button type="submit">Submit</button>
    </form>
  )
}

Custom Invocation with startTransition: Invoke Server Actions without using action or formAction by using startTransition. This method disables Progressive Enhancement.

'use client'

import { useTransition } from 'react'
import { addItem } from '../actions'

function ExampleClientComponent({ id }) {
  let [isPending, startTransition] = useTransition()

  return (
    <button onClick={() => startTransition(() => addItem(id))}>
      Add To Cart
    </button>
  )
}

‍

Enhancements

React also provides some experimental hooks that can enhance the functionality of server actions.

useOptimistic: This experimental hook allows you to incorporate optimistic updates into your application. Optimistic updates improve the user experience by making the app appear more responsive.

'use client'

import { experimental_useOptimistic as useOptimistic, useRef } from 'react'
import { send } from './actions.js'

export function Thread({ messages }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, { message: newMessage, sending: true }]
  )
  const formRef = useRef()

  return (
    <div>
      {optimisticMessages.map((m) => (
        <div>
          {m.message}
          {m.sending ? 'Sending...' : ''}
        </div>
      ))}
      <form
        action={async (formData) => {
          const message = formData.get('message')
          formRef.current.reset()
          addOptimisticMessage(message)
          await send(message)
        }}
        ref={formRef}
      >
        <input type="text" name="message" />
      </form>
    </div>
  )
}

useFormStatus: The experimental useFormStatus hook can be used within Form Actions, and provides the pending property.

'use client'

import { experimental_useFormStatus as useFormStatus } from 'react-dom'

function Submit() {
  const { pending } = useFormStatus()

  return (
    <input
      type="submit"
      className={pending ? 'button-pending' : 'button-normal'}
      disabled={pending}
    >
      Submit
    </input>
  )
}

React Server Components and Server Actions are two different concepts in the React ecosystem, each with its unique purposes and use cases.

‍

React Server Components

React Server Components are a new type of component introduced by the React team. They allow you to write components that render on the server and then send the HTML response to the client. The main advantage of this approach is that it allows you to leverage the power of the server to do things that would be expensive or impossible for the client.

For example, you can access a database directly from a React Server Component, something that you wouldn't be able to do from a client-side component. This can lead to significant performance improvements, as you can avoid the need to send large amounts of data over the network.

Here's an example of a React Server Component:


import { db } from './db'

export default function MyServerComponent({ id }) {

  const data = db.query(`SELECT * FROM my_table WHERE id = ${id}`)

  return (

    <div>

      {data.map((item) => (

        <div key={item.id}>{item.name}</div>

      ))}

    </div>

  )

}

React Server Components Vs Server Action

Server Actions

Server Actions, on the other hand, are a Next.js functionality built on React Actions. They allow for server-side data modifications, reduced client-side JavaScript, and gradually improved forms. They can be defined within Server Components and/or accessed through Client Components.

Server Actions are particularly useful when you need to perform a data mutation in response to a user action. For example, you might use a Server Action to update a database when a user submits a form.

Here's an example of a Server Action:


import { cookies } from 'next/headers'

export default function AddToCart({ productId }) {

  async function addItem(data) {

    'use server'

    const cartId = cookies().get('cartId')?.value

    await saveToDb({ cartId, data })

  }

  return (

    <form action={addItem}>

      <button type="submit">Add to Cart</button>

    </form>

  )

}

In conclusion, while both React Server Components and Server Actions involve server-side operations, they serve different purposes. React Server Components are used for server-side rendering of components, while Server Actions are used for server-side data mutations.

‍

Conclusion

In the React and Next.js ecosystems, server actions are a powerful tool. They support server-side data modifications, decreased client-side JavaScript, and gradually improved forms. With React's experimental hooks, you may extend the functionality of server operations and build a more responsive and interactive user experience.

Progressive Enhancement is another key feature of server actions. It ensures that your forms can still function properly even if JavaScript is disabled or fails to load. This is a crucial aspect of modern web development, as it ensures that your application remains accessible to all users, regardless of their device or network conditions.

Let us now discuss size constraints. The maximum size of the request body delivered to a Server Action is set to 1MB by default. This avoids sending enormous volumes of data to the server, which could use a lot of server resources to parse. You can, however, set this restriction using the experimental serverActionsBodySizeLimit option.

module.exports = {
  experimental: {
    serverActions: true,
    serverActionsBodySizeLimit: '2mb',
  },
}

Server actions also allow for on-demand revalidation. This means that you can revalidate data on-demand by path or by cache tag. This is particularly useful when you want to ensure that your data is always up-to-date, without manually triggering a revalidation.

import { revalidateTag } from 'next/cache'

async function revalidate() {
  'use server'
  revalidateTag('blog-posts')
}

Finally, I want to mention a tool that I've found incredibly helpful when working with server actions: WiseGPT. It's a generative AI for React developers that writes code in your style without context limit. It also provides API integration by accepting Postman collection and supports extending UI in the VSCode itself. It's been a game-changer for me and I highly recommend checking it out.

That's all for today! I hope this post has given you a deeper understanding of server actions and how they can be used in frontend development. As always, happy coding!

Flutter

React

Android

iOS

Node.js

Plugin

Templates

Screen Library

About Us

Career

Contact Us

Documention

Discord

Blogs

Webflow

Airtable

Notion

Chargebee

Freshteam

Spotify

Slack

Google Sheets

A Comprehensive Guide to Server Actions and Their Importance

Rakesh Purohit

Rakesh Purohit

What are Server Actions?

Why Use Server Actions?

How to Enable Server Actions?

How to Define Server Actions?

How to Invoke Server Actions

Enhancements

React Server Components

Server Actions

Conclusion

Frequently asked questions

Frequently asked questions

You’ve made it this far. Let’s build your first application

Products

Design to code

Learning

Comparison

Company

Double down for a greener Earth