# Nextjs Server Actions Were A Mistake

Source: https://www.youtube.com/watch?v=TyjBzn3o2XQ
Recap page: https://rapidrecap.app/video/TyjBzn3o2XQ
Generated: 2025-11-19T16:36:27.193+00:00

---
## Quick Overview

The developer ultimately abandoned Next.js Server Actions in favor of tRPC and client-side data fetching for his multi-app experience because Server Actions led to slow performance, especially when navigating between pages or when dealing with large amounts of data, forcing constant manual revalidation and negating the developer experience benefits.

**Key Points:**
- The creator initially loved Next.js Server Actions for simplifying data fetching and mutations without needing explicit API endpoints.
- The primary issue encountered was poor performance, particularly when navigating between pages that required revalidation of large data sets.
- Calling revalidatePath('/') caused the entire page's data to be refetched, leading to slow transitions without built-in loading animations.
- The developer found the experience of managing data fetching and mutations across multiple client and server components cumbersome, leading to duplicated logic.
- He ultimately migrated the application to use tRPC combined with client-side data fetching (using TanStack React Query), which provided a much better developer experience, especially for type safety.
- The decision was partly driven by the realization that the default behavior of Server Actions was not optimized for high-performance applications with complex navigation and data requirements.

![Screenshot at 0:26: Title card showing the video structure: 'WHY I LOVE IT' and 'REASONS WHY I FELL OUT OF LOVE WITH IT', framing the discussion as a review of the technology.](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-00-26.png)

**Context:** The video details a developer's experience over three years using Next.js Server Actions, initially embracing them as a default for data operations. However, as the developer built more complex applications, including a multi-app experience for a social media marketing tool called Yorby, he encountered significant performance bottlenecks and developer friction, leading him to revert to older patterns like tRPC and client-side fetching.

## Detailed Analysis

The speaker recounts his journey with Next.js Server Actions, starting with initial enthusiasm because they eliminated the need to write explicit API endpoints for data fetching and mutations (0:04). This simplicity was highly appealing for quickly building and launching applications like Yorby (0:15, 0:23). However, the honeymoon phase ended when dealing with complex, multi-app architectures. The major flaw identified was performance, specifically when using `revalidatePath('/')` (0:34, 3:43). Calling this function forced a full re-fetch of all data for the entire page, leading to noticeable slowness during navigation between pages (0:37, 6:22). Since there were no default loading animations, the user experience felt jarring and slow (0:40, 6:21). Furthermore, maintaining shared logic for data fetching and mutations across both the client-side consumer app and the admin portal became redundant, requiring duplicated logic (2:40, 2:50). The developer ultimately migrated away from Server Actions to tRPC combined with TanStack React Query (11:14, 11:50), which offered superior end-to-end type safety and a better developer experience for managing complex data flows, despite the necessity of creating API endpoints again.

### Initial Appeal of Server Actions

- Defaulted to using Server Actions for everything
- Enabled data fetching/mutation without API endpoints
- Simplified initial development (0:04-0:10)

### Reasons for Disillusionment

- Performance issues when navigating between pages
- Full page revalidation upon calling `revalidatePath()` caused slowness
- Lack of built-in loading feedback (0:15-0:22, 6:22-6:44)

### Architectural Friction

- Duplicated logic required across client and admin apps for data operations
- Server component limitations felt restrictive compared to tRPC (2:34-3:00, 6:45-6:53)

### The Replacement Solution

- Migrated to tRPC and TanStack React Query
- Achieved better performance and end-to-end type safety
- tRPC provided a superior developer experience (11:14-11:38)

![Screenshot at 0:01: Overlay showing hands typing on a laptop with Next.js code visible, illustrating the development context for Next.js applications \(0:01\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-00-01.png)
![Screenshot at 0:05: A graphic displaying the basic flow of Server Actions: Client -\> Server Component -\> Server Actions -\> Database \(0:24\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-00-05.png)
![Screenshot at 0:17: A meme of Jack Nicholson saying "NO MORE" overlaid on the speaker, symbolizing the decision to stop using Server Actions \(0:17\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-00-17.png)
![Screenshot at 0:25: Slide detailing the video structure: 'My History with Server Actions' with sections for 'WHY I LOVE IT' and 'REASONS WHY I FELL OUT OF LOVE WITH IT' \(0:25\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-00-25.png)
![Screenshot at 0:34: The speaker appears next to code showing an example of redirect\(\) function usage within a Next.js Server Action \(0:34\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-00-34.png)
![Screenshot at 2:12: Text overlay highlighting the core issue: 'SERVER ACTION ISSUE' and 'NOT GREAT If you're building A MULTI APP EXPERIENCE' \(2:12\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-02-12.png)
![Screenshot at 5:57: Code snippet showing the use of revalidatePath\(\) within a Server Action, which the speaker later criticizes for performance \(5:57\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-05-57.png)
![Screenshot at 11:13: A screenshot of the App Router settings showing an error message about using SWR library hooks in Server Components, highlighting integration difficulties \(11:13\).](https://ss.rapidrecap.app/screens/TyjBzn3o2XQ/00-11-13.png)