React 19 New Features - Server Components Now Stable

React 19 Overview

In React 19, Server Components have become stable, with Actions, new form handling, and many other improvements introduced.

What are Server Components

Server Components are components that render only on the server. They send only HTML to the client, without sending any JavaScript.

Difference from SSR: SSR generates initial HTML on the server, but JS is re-executed on the client afterward. Server Components are server-only, with no JS sent to the client at all.

Server Components Example

// Server Component (default)
async function ProductList() {
    // Direct DB access on server
    const products = await db.products.findMany();

    return (
        <ul>
            {products.map(product => (
                <li key={product.id}>{product.name}</li>
            ))}
        </ul>
    );
}

Combining with Client Components

// Client Component
'use client';

import { useState } from 'react';

export function AddToCartButton({ productId }) {
    const [loading, setLoading] = useState(false);

    return (
        <button onClick={() => addToCart(productId)}>
            Add to Cart
        </button>
    );
}

Actions

Actions are a new feature for concisely handling form submissions and data mutations.

async function createPost(formData) {
    'use server';

    const title = formData.get('title');
    await db.posts.create({ title });
    revalidatePath('/posts');
}

function PostForm() {
    return (
        <form action={createPost}>
            <input name="title" />
            <button type="submit">Post</button>
        </form>
    );
}

Other New Features

use() Hook

A new hook that can directly read Promises or Context.

function Comments({ commentsPromise }) {
    const comments = use(commentsPromise);
    return comments.map(c => <p>{c.text}</p>);
}

useFormStatus / useFormState

Easily get form submission status.

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return (
        <button disabled={pending}>
            {pending ? 'Submitting...' : 'Submit'}
        </button>
    );
}

Summary

React 19 enables more natural integration between server and client through Server Components and Actions. Combined with Next.js 14+, you can immediately leverage these features.