Server Actions in Next.js: The Key to Simplified Server Logic in Headless WordPress

The combination of Headless WordPress and Next.js has revolutionized modern web development, giving developers the power to create lightning-fast, customizable sites. But when you’re dealing with server-side logic—like fetching data from the WordPress GraphQL API, handling previews, or submitting forms—things can get complicated. Enter Server Actions, a Next.js feature that takes server-side operations to the next level.

In this article, we’ll break down what Server Actions are, how they work in a headless WordPress setup, and explore some real-world use cases.

---

What Are Server Actions in Next.js?

Server Actions, introduced in Next.js 13, are a game-changer for managing server-side logic. They’re essentially server-side functions you can call from your React components. Unlike API routes, Server Actions are co-located with your components, and the logic runs securely on the server.

Here’s what makes them so powerful:

• Server-Side Execution: Server Actions run directly on the server, so they can safely handle sensitive operations like fetching data with API keys or interacting with a database.
• Smaller Client-Side Bundles: Because the logic stays server-side, you’re not bloating your client-side JavaScript with unnecessary code.
• Simplified Architecture: No need for separate API routes or redundant client-to-server logic.

Example: A Basic Server Action Here’s a quick example of what a Server Action might look like:

'use server';

export async function fetchPosts() {
  const response = await fetch('https://your-wordpress-site.com/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query {
          posts {
            nodes {
              id
              title
              slug
            }
          }
        }
      `,
    }),
  });

  const { data } = await response.json();
  return data.posts.nodes;
}

This function securely fetches posts from your WordPress backend and returns the results. You can call it from your React components without exposing the logic or sensitive keys to the browser.

---

How Server Actions Work in Headless WordPress

In a headless WordPress setup, you’re often dealing with tasks like fetching content via GraphQL, handling WordPress previews, and processing form submissions. Traditionally, this meant creating API routes or exposing sensitive logic in your frontend code.

Server Actions change the game by letting you:

1. Fetch WordPress Data Securely: Keep your WordPress API keys and tokens server-side, where they’re safe.
2. Handle Previews: Enable draft content previews without exposing your preview tokens to the client.
3. Simplify Form Submissions: Process form data on the server without needing an additional API route.

Here’s how it fits together in a headless WordPress app:

• Draft Mode: Next.js’s built-in draftMode API pairs perfectly with Server Actions, allowing you to preview unpublished WordPress content.
• Dynamic Pages: Server Actions can fetch data for dynamic routes, such as /posts/[slug], without adding overhead to your client-side code.
• Server-Side Caching: You can take advantage of Next.js’s ISR (Incremental Static Regeneration) to keep your content fresh while minimizing WordPress API calls.

---

Example Use Cases of Server Actions in Headless WordPress

Let’s dive into some practical ways Server Actions shine in a headless WordPress setup.

1. Fetching Data for a Blog Page

Fetching blog posts for a headless WordPress site is a common use case. With Server Actions, you can securely query the WordPress GraphQL API and return the results to your React components.

'use client';

import { useState, useEffect } from 'react';
import { fetchPosts } from './actions';

export default function BlogPage() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function loadPosts() {
      const posts = await fetchPosts();
      setPosts(posts);
    }

    loadPosts();
  }, []);

  return (
    <div>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/posts/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Why It’s Better:

• The fetchPosts action runs server-side, so sensitive API keys never hit the browser.
• The client-side code is minimal, improving performance.

---

2. Handling WordPress Previews

Previewing draft content in WordPress is tricky in a headless setup. Server Actions make it easier to fetch draft content securely during a preview session.

'use server';

export async function fetchPreviewContent(postId, authToken) {
  const response = await fetch('https://your-wordpress-site.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${authToken}`,
    },
    body: JSON.stringify({
      query: `
        query {
          post(id: "${postId}", idType: DATABASE_ID) {
            id
            title
            content
          }
        }
      `,
    }),
  });

  const { data } = await response.json();
  return data.post;
}

With this function, you can fetch draft content securely, ensuring only authenticated users can access it.

---

3. Submitting Forms to WordPress

Whether it’s a contact form or a comment submission, forms need to be processed server-side to prevent exposing your WordPress REST API to abuse.

'use server';

export async function submitContactForm(formData) {
  const response = await fetch('https://your-wordpress-site.com/wp-json/contact-form-7/v1/contact-forms/123/feedback', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData),
  });

  const data = await response.json();
  return data;
}

You can then call this action securely from your form component:

'use client';

import { useState } from 'react';
import { submitContactForm } from './actions';

export default function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await submitContactForm({ name, email });
    console.log('Form submitted:', result);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

---

Wrapping Up

Server Actions in Next.js bring simplicity, security, and flexibility to headless WordPress projects. They streamline server-side operations, eliminate the need for custom API routes, and keep sensitive logic off the client.

If you’re building a headless WordPress app with Next.js, Server Actions are a must-have tool in your toolkit. They make your code cleaner, your app faster, and your development experience smoother.

Ready to dive deeper? Explore Next.js documentation on Server Actions and start experimenting in your next project!