React Server Components: O Futuro do React

Server Components

React Server Components é uma das inovações mais importantes do React, permitindo renderização no servidor com zero JavaScript no cliente.

Server Component

// app/posts/Posts.js (Server Component)
import { db } from '@/lib/db';

export default async function Posts() {
    // Executa apenas no servidor
    const posts = await db.posts.findMany();
    
    return (
        <div>
            {posts.map(post => (
                <PostCard key={post.id} post={post} />
            ))}
        </div>
    );
}

Client Component

'use client'; // Diretiva necessária

import { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

Híbrido

// Server Component pode usar Client Components
import Counter from './Counter'; // Client Component

export default function Page() {
    return (
        <div>
            <h1>Server Component</h1>
            <Counter /> {/* Client Component */}
        </div>
    );
}