How to fetch APIs in React 19 (Server Side)

Introduction

React 19 introduces powerful new features for server-side rendering (SSR) and data fetching, making it easier to build fast, SEO-friendly web applications.

With the release of React 19, the way we handle data fetching----especially on the server side----has evolved significantly. Thanks to React Server Components, async/await support at the component level, and server actions, developers can now fetch data directly on the server without relying on external frameworks like Next.js.

In this blog, we'll walk you through how to fetch APIs on the server side using React 19, step by step.

Prerequisites

• Before fetching APIs in React 19, ensure you have:
• Node.js (v18+) installed
• A React 19 project (using Vite + React)
• Basic knowledge of React Server Components

What's New in React 19 for Server-Side Fetching?

React 19 introduces several enhancements that make server-side data fetching much more powerful and seamless:

• Server Components (RSC)
  React Server Components allow you to write components that render on the server, which helps with performance, SEO, and faster time-to-interactive.
• Async Server Components
  You can now use async functions directly in your component definition to fetch data on the server.
• Server Actions (Form submissions or mutations on the server)
  Actions can be run on the server and called from client components.

When Should You Fetch APIs on the Server in React?

• For SEO-critical content
• For authenticated user data
• When you want to offload work from the client
• When fetching large datasets

1. Fetching Data with an Async Server Component

   Here’s how you can fetch data on the server using an async component in React 19:

     <!-- src/components/UserList.server.jsx -->
   
     export default async function UserList() {
       const res = await fetch('https://jsonplaceholder.typicode.com/users');
       const users = await res.json();
   
       return (
         <ul>
           {users.map((user) => (
             <li key={user.id}>
               {user.name} - {user.email}
             </li>
           ))}
         </ul>
       );
     }

2. Using Server Actions in React 19

   React 19 introduces Server Actionswhich allow server-side logic to be triggered from forms or client events.

     <!-- actions.js -->
     'use server';
   
     export async function createUser(formData) {
       const name = formData.get('name');
       const email = formData.get('email');
   
       await fetch('https://jsonplaceholder.typicode.com/users', {
         method: 'POST',
         body: JSON.stringify({ name, email }),
         headers: {
           'Content-Type': 'application/json',
         },
       });
     }

     <!-- CreateUserForm.server.jsx -->
     import { createUser } from './actions';
   
     export default function CreateUserForm() {
       return (
         <form action={createUser}>
           <input name="name" placeholder="Name" required />
           <input name="email" placeholder="Email" required />
           <button type="submit">Create User</button>
         </form>
       );
     }

3. Combining Server & Client Components

   React 19 allows a Client Component to consume data fetched by a Server Component.

     <!-- src/components/UserListWithClient.jsx -->
     'use client';
     import { useState } from 'react';
   
     export default function UserListWithClient({ users }) {
       const [filter, setFilter] = useState('');
   
       const filteredUsers = users.filter((user) =>
         user.name.toLowerCase().includes(filter.toLowerCase())
       );
   
       return (
         <>
           <input
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
             placeholder="Search user"
           />
           <ul>
             {filteredUsers.map((user) => (
               <li key={user.id}>{user.name}</li>
             ))}
           </ul>
         </>
       );
     }
   

     <!-- src/pages/UserPage.server.jsx -->
     import UserListWithClient from '../components/UserListWithClient';
   
     export default async function UserPage() {
       const res = await fetch('https://jsonplaceholder.typicode.com/users');
       const users = await res.json();
   
       return <UserListWithClient users={users} />;
     }

4. Best Practices for Server Fetching in React 19

   • 📦 Avoid over-fetching: Only request what the component needs.
   • 🔐 Keep secrets on the server: Perfect for API keys, tokens, etc.
   • ♻️ Cache where necessary: Use HTTP headers or libraries like react-cache.
   • 🧪 Test with mock data: Always separate concerns for testability.

Limitations & Gotchas

• Server Components can't use useState, useEffect, or browser-only APIs.
• Make sure to clearly separate .client.jsx and .server.jsx files.
• Middleware and environment setup (like Vite or Next.js) needs proper RSC support.

Conclusion

React 19 takes server-side data fetching to the next level with native support for async components, React Server Components, and server actions. This leads to faster load times, improved SEO, and better security by keeping logic on the server.

If you're building modern web applications, learning server-side patterns in React 19 is essential for performance, scalability, and developer ergonomics.