Home
Roles We Fill

Technical Leadership

Artificial Intelligence

Back-end Developers

Front-end Developers

Mobile Developers

Other Roles

Our Services
Our Process
For Freelancers
Blog
Apply as a FreelancerHire Now

Mastering React 19 Part 2: Server Components & Server Actions [Tutorial]

Profile Picture of Will Eizlini
Will Eizlini
Full-stack Developer
A developer working on a laptop, interacting with a large digital interface that resembles a web application, surrounding by React and Next.js logos, code snippets, database storage, analytics charts, and UI components, all symbolizing React 19's Server Components and Server Actions.

React 19 was a major milestone in the framework’s evolution. Two of the biggest achievements were the release of Server Components and Server Actions, the server-side aspect of React 19’s full-stack vision. It’s no exaggeration to say these features are a colossal game changer in how React developers will create full-stack code.

If you haven’t yet familiarized yourself with the client-side changes introduced in React 19, I covered them in part I of this series. In part II, we’re going to explore Server Components and Server Actions using a simple Next.js app – because, according to the React Team, Next.js’ implementation of Server Components most closely aligns with React’s direction as a full-stack UI framework.

Table Of Contents

My goal in this article is to explore and answer some questions that are foundational to the latest React release:

  • What exactly are Server Components and async Server Components?
  • How do Server Components interact with Client Components?
  • What are Server Actions, and how are they used in React 19?

To explore these questions, we’ll use our simple example app to demonstrate:

  1. How to implement server components to streamline data fetching.
  2. How Client Components can use Server Actions to mutate data on the server more cleanly, avoiding the need for useEffect or exposing APIs to the front-end.
  3. Explore the limitations and considerations of Server Components and Server Actions to get a balanced perspective.

By the end of this piece, you’ll have a clear understanding of these concepts and be able to decide whether now is the time to embrace full-stack React, recognize situations where this approach might not fit, and identify potential risks to keep in mind.

With that, let’s dig in!

What Exactly Are React 19 Server Components?

Originally published on Feb 20, 2025Last updated on Jul 21, 2025
Key Takeaways

What are React server components?

React Server Components run entirely on the server, allowing direct access to databases and APIs while sending only pre-rendered HTML to the client—eliminating JavaScript overhead. They work alongside Client Components ("use client"), enabling a hybrid approach that optimizes performance and interactivity.

How to use server components in React 19?

Server Components in React 19 run entirely on the server, allowing direct access to databases and APIs while sending only the rendered HTML to the client. In Next.js 15, they are the default and require no special directive.
To use them:
1. Write a standard React component (omit "use client").
2. Fetch data asynchronously inside the component.
3. Avoid client-side features like hooks or browser APIs.
4. Wrap interactive elements in Client Components ("use client").
This setup improves performance by reducing client-side JavaScript and enabling efficient server-side rendering.

What are server actions in React 19?

Server Actions are asynchronous functions marked with "use server" that run on the server but can be called directly from Client Components—no need to create separate API routes. They integrate naturally with forms and useActionState, making optimistic UI updates and pending states easier to manage. While they streamline client-server interactions, developers still need to handle validation and authentication, as Server Actions can directly access backend resources like databases.

Looking to hire?

The Scalable Path Newsletter

Join thousands of subscribers and receive original articles about building awesome digital products. Check out past issues.