React Server Components (RSC)

React Server Components (RSC) son componentes que se ejecutan SOLO en el servidor. No se envían al navegador, no aumentan el tamaño del bundle, y pueden acceder directamente a bases de datos, archivos del sistema, y APIs internas sin exponer credenciales. Next.js (App Router) los implementa por defecto: todo componente es "Server" a menos que pongas "use client" al inicio del archivo.

La separación es clara: Server Components para fetch de datos, acceso a DB, rendering estático. Client Components (con "use client") para interactividad: useState, useEffect, onClick, formularios. Puedes anidarlos: un Server Component renderiza datos y pasa props a un Client Component que maneja la interacción. Esto reduce drásticamente el JavaScript enviado al navegador.

// app/page.jsx — Server Component (por defecto en Next.js)
// Ejecuta SOLO en el servidor, nunca llega al navegador
import { db } from "@/lib/database";
import ProductList from "./ProductList";

export default async function HomePage() {
  // Acceso directo a DB — sin API, sin fetch
  const products = await db.product.findMany({
    orderBy: { createdAt: "desc" },
    take: 20,
  });

  return (
    <main>
      <h1>Productos ({products.length})</h1>
      {/* Pasa datos al Client Component */}
      <ProductList initialProducts={products} />
    </main>
  );
}

// app/ProductList.jsx — Client Component (interactivo)
"use client";
import { useState } from "react";

export default function ProductList({ initialProducts }) {
  const [search, setSearch] = useState("");
  const filtered = initialProducts.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Buscar producto..."
      />
      {filtered.map(p => (
        <div key={p.id}>{p.name} - ${p.price}</div>
      ))}
    </div>
  );
}

// Server Actions — mutaciones desde el servidor
// app/actions.js
"use server";
export async function addToCart(productId) {
  await db.cart.create({ data: { productId, userId: getCurrentUser() } });
  revalidatePath("/cart");
}