Nuevas características de React 19 - Server Components ahora estable

Resumen de React 19

En React 19, Server Components se ha convertido en versión estable, y se han introducido Actions, nuevo manejo de formularios y muchas otras mejoras.

Qué son los Server Components

Los Server Components son componentes que solo se renderizan en el servidor. No envían JavaScript al cliente, solo HTML.

Diferencia con SSR: SSR genera el HTML inicial en el servidor, pero después el JS se vuelve a ejecutar en el cliente. Los Server Components son exclusivos del servidor y no se envía ningún JS al cliente.

Ejemplo de Server Components

// Server Component (por defecto)
async function ProductList() {
    // Acceso directo a la BD desde el servidor
    const products = await db.products.findMany();

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

Combinación con Client Components

// Client Component
'use client';

import { useState } from 'react';

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

    return (
        <button onClick={() => addToCart(productId)}>
            Agregar al carrito
        </button>
    );
}

Actions

Actions es una nueva funcionalidad que procesa de forma concisa el envío de formularios y cambios de datos.

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>
    );
}

Otras nuevas funcionalidades

Hook use()

Un nuevo hook que permite leer directamente Promises o Context.

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

useFormStatus / useFormState

Permite obtener fácilmente el estado de envío del formulario.

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

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

Resumen

React 19, con Server Components y Actions, permite una integración más natural entre servidor y cliente. Combinándolo con Next.js 14+, puedes aprovechar estas funcionalidades de inmediato.