Server Actions in Next.js

Rokas — Thu, 21 Sep 2023 09:19:53 +0000

Introduction

Recently I stumbled upon Next.js new experimental feature called Server Actions. The feature allows to run code on the server without having to create and maintain separate API endpoints. This can simplify your codebase and make it easier to develop and maintain your application.

What are the benefits of using server actions?

Security: Server actions are more secure than traditional API endpoints, as the code is executed on the server and is not exposed to the client. This can help to prevent attacks such as cross-site scripting (XSS) and cross-site request forgery (CSRF).
Performance: Server actions can help to improve the performance of your application by caching the results of server actions. This can reduce the number of requests that need to be made to the server, which can lead to faster page load times.
Ease of use: Server actions are easier to use than traditional API endpoints, as you do not need to manually create API endpoints. This can simplify your code and make it easier to maintain.

What about the use cases for server actions?

Writing to a database
Executing any server-related business logic, such as sending emails, creating files, etc.
Calling external APIs

Best way to explain it is with an example, so let's dive into it.

Set up

Since the Server Actions is still in the experimental phase, we have to enable it manually. In the next.config.js file, we have to add the following:

// next.config.js
const nextConfig = {
  experimental: {
    serverActions: true,
  },
}

In the demo I will build a simple form, which allows us to add guests. To start I will use mockapi.io to generate custom data and to be able to perform GET AND POST requests. I created a simple API endpoint for our guests.

Having created the API endpoint, I can now navigate to the provided url and make a GET request
https://650be2bb47af3fd22f66a17c.mockapi.io/guests. Voila, the results below.

Creating the form

First we need to create a form. We can do this by adding the following code to our page:

// page.tsx
export default async function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Guest List</h1>
      <form action="" className="mb-4">
        <input
          type="text"
          placeholder="Guest name..."
          className="p-2 border border-gray-300 rounded"
        />
        <button
          type="submit"
          className="bg-blue-500 text-white ml-4 py-2 px-4 rounded"
        >
          Add guest
        </button>
      </form>
    </div>
  )
}

A form, that allows us to add guests:

Making a GET request

The next step would be to make a GET request to our API, and display our guests. Inside our Home component, I will make a fetch request, which I will map over the response and display it in the browser:

// page.tsx
export type Guest = {
  id?: number
  name: string
}

export default async function Home() {
// Fetch request to our mock API.
  const res = await fetch('https://650be2bb47af3fd22f66a17c.mockapi.io/guests')
  const guests: Guest[] = await res.json()

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Guest List</h1>
      <form action="" className="mb-4">
        <input
          type="text"
          placeholder="Guest name..."
          className="p-2 border border-gray-300 rounded"
        />
        <button
          type="submit"
          className="bg-blue-500 text-white ml-4 py-2 px-4 rounded"
        >
          Add guest
        </button>
      </form>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
// Mapping over our guest list
        {guests.map((guest) => (
          <div
            key={guest.id}
            className="bg-white p-4 border border-gray-300 rounded"
          >
            <h2 className="text-xl font-bold mb-2">{guest.name}</h2>
            <p>Guest ID: {guest.id}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

The end result:

Making a POST request

The next step is to be able to make a POST request to our API, to allow us to add guests. The action prop of the form element specifies the function that should be called when the form is submitted. In this case, we are setting the action prop to the addGuestToDatabase() function.

const res = await fetch(
  'https://650be2bb47af3fd22f66a17c.mockapi.io/guests',
  {
    next: {
      tags: ['guest'],
    },
   }
  )

{.... rest of the code}
// action prop
<form action={addGuestToDatabase} className="mb-4">
  <input
    type="text"
    name="name"
    placeholder="Guest name..."
    className="p-2 border border-gray-300 rounded"
/>

next: { tags: ['guest'] } option tells Next.js to invalidate the cache for any components that are subscribed to the guest tag when the request is successful. This ensures that the guest list is updated immediately after a new guest is added.

Implementing the addGuestToDatabase() function

The addGuestToDatabase() function is responsible for adding a new guest to the database. We can implement this function as follows:

'use server'
export const addGuestToDatabase = async (data: FormData) => {
  const name = data.get('name')?.toString()
  if (!name) return

  const newGuest: Guest = {
    name,
  }

  await fetch('https://650be2bb47af3fd22f66a17c.mockapi.io/guests', {
    method: 'POST',
    body: JSON.stringify(newGuest),
    headers: {
      'Content-Type': 'application/json',
    },
  })

  revalidateTag('guest')
}

The use server directive tells Next.js that this function should be executed on the server.

The revalidateTag() function tells Next.js to invalidate the cache for any components that are subscribed to the guest tag. This ensures that the guest list is updated immediately after a new guest is added to the database.

Conclusion

Server Actions is a powerful new feature that can simplify your codebase, make it easier to develop and maintain your Next.js applications, and improve performance by caching the results of server actions.

In this article, we have learned how to use Server Actions to create a simple form that allows users to add guests to a database. We have also seen how to use the revalidateTag() function to ensure that the guest list is updated immediately after a new guest is added.

Server Actions are still in the experimental phase, but they have the potential to revolutionise the way we develop Next.js applications. I encourage you to try out Server Actions and see how they can improve your development workflow.

React Server Components with Next.js

Rokas — Wed, 20 Sep 2023 14:55:30 +0000

Next.js 13 introduced React Server Components (RSC) which bring a powerful new capability to web development. They allow you to render React components on the server (Point to note RSC is not the same as Server Side Rendering despite carrying out renders on the server). This means that you can now render your entire user interface on the server, including dynamic content, without having to rely on JavaScript on the client. Let's dive into how to implement and leverage these components for a smoother, more SEO-friendly web experience.

Implementation Example:

const getCompanies = async () => {
  const res = await fetch('https://fakerapi.it/api/v1/companies?_quantity=5')
  const companies = await res.json()
  return companies.data
}

export default async function Home() {
  const companies = await getCompanies()

  return (
    <ul>
      {companies.map((company) => {
        return <li key={company.name}>{company.name}</li>
      })}
    </ul>
  )
}

A few takeaways from the code block:

Asynchronous Code in React Component:
We are using asynchronous operations, directly within the component.

Reduced size of the JavaScript bundle:
As mentioned, this code block is focused on server-side rendering. In this instance the the JavaScript code is not executed on the client, but rather on the server side.

Data Fetching on the Server:
The getCompanies function is designed to fetch data from an external API. This is done on the server, meaning the fetch request is initiated and processed before the component is rendered.

When to use RSC?

To Improve the Performance of your Application:
RSC significantly enhance performance by minimising the JavaScript execution required on the client-side.

To Enhance your SEO:
It contributes to better SEO by ensuring that search engines can access and index dynamic content, resulting in higher visibility in search results.

To Improve Data Fetching:
RSC excel at server-side data fetching. By retrieving and rendering data on the server, they reduce the volume of data transferred to the client, thus boosting overall performance.

Some examples of when you might want to use RSCs:

To render a personalised homepage for each user.
To render a product page that displays the latest product reviews.
To render a blog page that displays the latest blog posts.

When not to use server side components?

When you need to render highly interactive content:
Server components are not ideal for rendering highly interactive content, such as real-time chat applications or games. This is because server components are rendered on the server, and any interactivity needs to be implemented using client-side code.

Some examples of when you might not want to use RSCs:

To render a real-time chat application.
To render a game.

Conclusion:

Next.js RSC represent a significant leap forward in crafting performant, SEO-friendly web applications. By strategically employing them, you can streamline your codebase, enhance user experiences, and optimise your site's visibility in search engine results. As you integrate these components into your projects, you'll unlock new levels of efficiency and user satisfaction. Embrace the power of RSC and elevate your Next.js applications to new heights.

Forem: Rokas