Next.js Server Actions for Data Fetching: Performance Issues and Solutions

Next.js Server Actions provide a groundbreaking method for integrating server-side operations directly into React applications, enabling optimized workflows for server logic and enhancing Next.js server-side integration. While they simplify workflows for mutations and server logic, their use for data fetching can present significant performance challenges. This guide explores these challenges, provides benchmark comparisons, and offers actionable solutions to optimize performance.

Understanding Next.js Server Actions

Next.js Server Actions have revolutionized server-side operations in React applications. Designed primarily for form handling and data mutations, they are increasingly used for data fetching—but not without challenges.

What Are Server Actions?

Server Actions in Next.js 14+ enable direct server-side operations from components. Their primary use cases include:

• Form submissions
• Data mutations
• Server-side state management
• Database operations

Server Actions promise simplicity by integrating server logic seamlessly with React components. However, using them for data fetching introduces critical performance challenges.

Learn more about Server Actions in the official Next.js documentation.

Performance Problems with Server Actions

HTTP Method Concerns

Server Actions exclusively use POST requests, leading to several challenges when applied to data fetching:

• REST Principle Violation: GET requests are conventionally used for retrieving data. Using POST disrupts standard practices.
• Caching Complexity: Caching mechanisms for GET requests, such as HTTP caching or CDN layers, are inherently easier to implement compared to POST.
• Reduced API Intuition: POST-based data fetching can make APIs less predictable and harder to document for team collaboration.

Sequential Execution Problem

A significant performance bottleneck arises when multiple Server Actions are invoked concurrently. Here's a common scenario:

'use server';

export async function fetchData({ id, delay }: { id: number; delay: number }) {
  await new Promise((resolve) => setTimeout(resolve, delay));
  return { id };
}

Executing this function for multiple requests:

// These execute sequentially despite Promise.all
const results = await Promise.all([
  fetchData({ id: 1, delay: 1000 }),
  fetchData({ id: 2, delay: 1000 }),
  fetchData({ id: 3, delay: 1000 })
]);

The expectation is concurrent execution, but the reality is sequential processing, dramatically increasing response times.

Benchmark Results

To quantify the performance of Server Actions, we conducted real-world testing with 10 concurrent requests, each with a 1000ms delay. The results:

Key Insights:

• API Routes: Demonstrated near-ideal concurrent execution.
• Concurrent Server Actions: Showed marked improvement over default Server Actions.
• Default Server Actions: Suffered from severe sequential bottlenecks, rendering them impractical for high-performance needs.

Solutions and Best Practices

1. Use API Routes for Data Fetching

API Routes remain the gold standard for data fetching in Next.js. Here's a straightforward implementation:

// app/api/route.ts
import { NextRequest } from 'next/server';

export async function GET(req: NextRequest) {
  const n = req.nextUrl.searchParams.get('n');
  const duration = Number(req.nextUrl.searchParams.get('duration'));
  await new Promise((resolve) => setTimeout(resolve, duration));
  return Response.json({ n });
}

Advantages:

• Leverages HTTP GET, simplifying caching and alignment with REST principles.
• Supports CDN optimizations out of the box.

2. Adopt the Concurrent Server Actions Pattern

The concurrent pattern addresses the sequential execution issue inherent in default Server Actions. Unlike standard sequential processing, this approach utilizes concurrency to execute multiple actions simultaneously, significantly reducing overall execution time.

How It Differs from Standard Approaches

Default Server Actions process tasks one after the other, even when wrapped in promises, due to the server's handling of individual requests. This leads to significant delays in scenarios requiring multiple actions. By contrast, the concurrent pattern ensures that all operations begin immediately, leveraging JavaScript's asynchronous capabilities to minimize delays.

This distinction is critical for developers aiming to optimize server actions in Next.js and ensure efficient handling of complex workflows. Implementing the concurrent pattern can dramatically enhance performance, particularly for applications requiring high-volume data interactions. A custom utility can enable concurrent execution of Server Actions.

Utility Implementation:

export function createConcurrentAction<T, U extends unknown[]>(
  action: (...args: U) => Promise<T>
) {
  return async (...args: U) => [action(...args)] as const;
}

export async function runConcurrentAction<T>(
  result: Promise<readonly [Promise<T>]>
) {
  return (await result)[0];
}

export const nonBlockingFetch = createConcurrentAction(fetchData);

Client-Side Usage:

const results = await Promise.all([
  runConcurrentAction(nonBlockingFetch({ id: 1, delay: 1000 })),
  runConcurrentAction(nonBlockingFetch({ id: 2, delay: 1000 })),
  runConcurrentAction(nonBlockingFetch({ id: 3, delay: 1000 }))
]);

Advantages:

• Minimizes execution time for concurrent operations.
• Maintains compatibility with Server Actions.

Implementation Guide

Step 1: Define the Base Action

'use server';

export async function processTask({ n, duration }: { n: number; duration: number }) {
  console.log(`Running action ${n}...`);
  await new Promise((resolve) => setTimeout(resolve, duration));
  return { n };
}

Step 2: Create a Concurrent Version

export const nonBlockingProcessTask = createConcurrentAction(processTask);

Step 3: Execute Client-Side

const results = await Promise.all([
  runConcurrentAction(nonBlockingProcessTask({ n: 1, duration: 1000 })),
  runConcurrentAction(nonBlockingProcessTask({ n: 2, duration: 1000 })),
  runConcurrentAction(nonBlockingProcessTask({ n: 3, duration: 1000 }))
]);

Conclusion and Recommendations

Server Actions present a transformative opportunity for integrating server-side logic into React applications, offering efficiency and flexibility. However, leveraging them for data fetching requires a nuanced understanding of their benefits and limitations to maximize their potential in Next.js workflows.

Best Practices

For Data Fetching:

• Prefer API Routes for optimal performance and simplicity.
• Use tools like React Query or SWR for client-side caching and revalidation.

When Using Server Actions:

• Apply the concurrent execution pattern to avoid sequential bottlenecks.
• Recognize the inherent overhead (~1,000ms) compared to API Routes.
• Consider batch operations for related requests.

For Sequential Operations:

• Default Server Actions may suffice.
• Explore batch endpoints for efficiency.

Key Takeaways

• Mutations: Server Actions excel for data mutations but need optimization for fetching.
• Concurrency: The concurrent pattern delivers a 90% performance improvement.
• API Routes: Remain the go-to for data fetching due to their flexibility and speed.

Explore related resources:

Github repository example

React Query Documentation

SWR Documentation

Server Actions Guide

Next.js Data Fetching Practices

Happy coding!