Componentes del Servidor

// app/page.tsx -- Server Component de forma predeterminada (no se necesita directiva)
import { db } from "@/lib/db";
 
export default async function HomePage() {
  const posts = await db.post.findMany({ take: 10 });
 
  return (
    <main>
      <h1>Últimas Publicaciones</h1>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </main>
  );
}

// app/blog/page.tsx (Server Component)
import { Suspense } from "react";
import { formatDistanceToNow } from "date-fns";
 
type Post = {
  id: string;
  title: string;
  excerpt: string;
  publishedAt: string;
  author: { name: string; avatar: string };
};
 
async function fetchPosts(): Promise<Post[]> {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 300 },
  });
  if (!res.ok) throw new Error("Error al obtener publicaciones");
  return res.json();
}
 
export default async function BlogPage() {
  return (
    <main className="max-w-3xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">Blog</h1>
      <Suspense fallback={<PostsSkeleton />}>
        <PostList />
      </Suspense>
    </main>
  );
}
 
async function PostList() {
  const posts = await fetchPosts();
 
  return (
    <div className="space-y-8">
      {posts.map((post) => (
        <article key={post.id} className="border-b pb-6">
          <h2 className="text-xl font-semibold mb-2">{post.title}</h2>
          <p className="text-gray-600 mb-3">{post.excerpt}</p>
          <div className="flex items-center gap-3 text-sm text-gray-500">
            <img
              src={post.author.avatar}
              alt={post.author.name}
              className="w-6 h-6 rounded-full"
            />
            <span>{post.author.name}</span>
            <span>
              {formatDistanceToNow(new Date(post.publishedAt), {
                addSuffix: true,
              })}
            </span>
          </div>
        </article>
      ))}
    </div>
  );
}
 
function PostsSkeleton() {
  return (
    <div className="space-y-8">
      {Array.from({ length: 3 }).map((_, i) => (
        <div key={i} className="border-b pb-6">
          <div className="h-6 bg-gray-200 rounded w-3/4 mb-2 animate-pulse" />
          <div className="h-4 bg-gray-100 rounded w-full mb-3 animate-pulse" />
          <div className="h-4 bg-gray-100 rounded w-1/2 animate-pulse" />
        </div>
      ))}
    </div>
  );
}

async function Dashboard() {
  const [users, revenue, orders] = await Promise.all([
    fetchUsers(),
    fetchRevenue(),
    fetchOrders(),
  ]);
 
  return (
    <>
      <UserTable users={users} />
      <RevenueChart revenue={revenue} />
      <OrderList orders={orders} />
    </>
  );
}

// Server Component
import { ClientMap } from "./client-map";
 
export default async function LocationPage() {
  const locations = await db.location.findMany();
 
  // Solo los datos serializables pueden cruzar el límite
  return <ClientMap locations={locations} />;
}

// lib/server-only-utils.ts
import "server-only"; // Lanza un error de compilación si se importa en un Client Component
 
export function getSecretConfig() {
  return {
    apiKey: process.env.SECRET_API_KEY!,
    dbUrl: process.env.DATABASE_URL!,
  };
}

// Los Server Components async retornan Promise<JSX.Element>
// TypeScript maneja esto con los tipos de React 19+
async function MyComponent(): Promise<JSX.Element> {
  const data = await fetchData();
  return <div>{data.name}</div>;
}
 
// Los props deben ser serializables cuando se pasan a Client Components
type SerializableProps = {
  name: string;
  count: number;
  items: { id: string; label: string }[];
  // NO permitido: onClick: () => void
  // NO permitido: ref: React.Ref<HTMLDivElement>
};
 
// Usa el paquete `server-only` para protección en tiempo de compilación
import "server-only";

// Ejemplo de producción: Página de categoría de FAQ con acceso directo a datos
// Archivo: src/app/faqs/[slug]/page.tsx
export default async function FaqCategoryPage({ params }: FaqCategoryPageProps) {
  const { slug } = await params;
  const category = await getFaqCategory(slug);
 
  if (!category) {
    notFound();
  }
 
  const iconConfig = getFaqIcon(category.slug);
  const IconComponent = iconConfig.icon;
 
  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-black">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <Link href="/faqs" className="inline-flex items-center gap-2 text-sm cursor-pointer">
          <ChevronLeft className="h-4 w-4" />
          <span>Volver a todas las FAQs</span>
        </Link>
        <div className="flex items-center gap-3 mb-4">
          <div className={iconConfig.color}>
            <IconComponent className="h-8 w-8" />
          </div>
          <h1 className="text-3xl font-bold">{category.title}</h1>
        </div>
        <FaqList faqs={category.faqs} categorySlug={category.slug} />
      </div>
    </div>
  );
}