nextjs server actions patterns

As developers, we're constantly looking for ways to improve user experience and performance in our applications. One key aspect of achieving this is by leveraging the power of server-side rendering (SSR) and progressive enhancement techniques. In this article, we'll explore a specific pattern called "Server Actions" that will help you take your Next.js application to the next level.

What are Server Actions?

At its core, a Server Action is an API endpoint that performs business logic on the server-side, while also handling client-side updates and revalidation. This pattern combines the benefits of SSR with the flexibility of client-side state management.

Let's dive into a simple example using Next.js and TypeScript. Suppose we have a blog post editor where users can update the title and content. We'll create a Server Action to handle these updates on the server-side, while also updating the client-side state.

// pages/api/posts/[id].ts
import { NextApiRequest, NextApiResponse } from 'next';
import { Post } from '../models/Post';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const postId = req.query.id;
  const data = req.body;

  // Update the post on the server-side
  const updatedPost = await Post.update(postId, data);

  // Send a response back to the client with the updated post
  return res.status(200).json(updatedPost);
}

Optimistic Updates

One of the key benefits of Server Actions is the ability to perform optimistic updates. This means that when a user submits a form or makes an update, we can immediately reflect those changes on the client-side without waiting for the server response.

Let's take our previous example and add some client-side code using Next.js's built-in useFormState hook.

// pages/posts/[id].tsx
import { useFormState } from 'next';
import { useEffect, useState } from 'react';

const PostEditor = () => {
  const [data, setData] = useState({ title: '', content: '' });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const onSubmit = async (event) => {
    event.preventDefault();
    setIsSubmitting(true);
    try {
      // Perform a POST request to the server-side API
      const response = await fetch('/api/posts/[id]', {
        method: 'POST',
        body: JSON.stringify(data),
      });

      // Update the client-side state with the new data
      setData(response.json());
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" value={data.title} onChange={(event) => setData({ ...data, title: event.target.value })} />
      <textarea value={data.content} onChange={(event) => setData({ ...data, content: event.target.value })} />
      <button type="submit">Submit</button>
    </form>
  );
};

Revalidation Patterns

Another crucial aspect of Server Actions is revalidation. When the server responds with an updated version of the data, we need to ensure that our client-side state reflects these changes.

Let's explore a simple revalidation pattern using Next.js's built-in useEffect hook.

// pages/posts/[id].tsx (continued)
import { useEffect } from 'react';

const PostEditor = () => {
  // ... (previous code)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/posts/[id]');
        setData(response.json());
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);

  return (
    <form onSubmit={onSubmit}>
      {/* ... */}
    </form>
  );
};

When Not to Use Server Actions

While Server Actions offer many benefits, there are cases where you might not want to use this pattern. For example:

• When dealing with extremely large datasets or complex business logic, a more traditional API approach might be more suitable.
• In scenarios where the client-side state is not relevant, such as in server-generated reports or data exports.

Related Apiary Lessons

If you're interested in learning more about Next.js and TypeScript, we recommend checking out the following lessons:

• Next.js Fundamentals: A comprehensive guide to building Next.js applications from scratch.
• TypeScript for Next.js Developers: Learn how to leverage TypeScript's powerful type system to write more maintainable and efficient code.

Conclusion

Server Actions offer a powerful way to enhance user experience and performance in your Next.js application. By combining the benefits of SSR with the flexibility of client-side state management, you can create more responsive and engaging experiences for your users. Remember to use this pattern judiciously, taking into account factors like dataset size and business logic complexity.

As we wrap up this article, let's leave you with a bee-themed one-liner:

"Just as bees collect nectar from many flowers, Server Actions gather data from the server-side and client-side – creating a sweet API experience for all!"