Novidades do React 19 - Server Components Agora Estáveis

Visão Geral do React 19

No React 19, os Server Components se tornaram estáveis, e Actions, novo processamento de formulários e muitas outras melhorias foram introduzidas.

O que são Server Components

Server Components são componentes que são renderizados apenas no servidor. Não enviam JavaScript para o cliente, apenas HTML.

Diferença do SSR: SSR gera o HTML inicial no servidor, mas depois o JS é re-executado no cliente. Server Components são exclusivos do servidor, nenhum JS é enviado ao cliente.

Exemplo de Server Components

// Server Component (padrão)
async function ProductList() {
    // Acessa o BD diretamente no servidor
    const products = await db.products.findMany();

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

Combinação com Client Components

// Client Component
'use client';

import { useState } from 'react';

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

    return (
        <button onClick={() => addToCart(productId)}>
            Adicionar ao carrinho
        </button>
    );
}

Actions

Actions são uma nova funcionalidade para processar envios de formulários e alterações de dados de forma concisa.

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">Publicar</button>
        </form>
    );
}

Outras Novas Funcionalidades

Hook use()

Um novo hook que pode ler Promises e Context diretamente.

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

useFormStatus / useFormState

Permite obter facilmente o estado de envio de formulários.

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

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

Resumo

React 19, com Server Components e Actions, permite uma integração mais natural entre servidor e cliente. Combinando com Next.js 14+, você pode aproveitar essas funcionalidades imediatamente.