Obtención de datos en Componentes de Servidor

// app/posts/page.tsx (Server Component -- el predeterminado)
export default async function PostsPage() {
  // Almacenado en caché por defecto (force-cache)
  const res = await fetch("https://api.example.com/posts");
  const posts: Post[] = await res.json();
 
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}
 
// Revalidación basada en tiempo
await fetch(url, { next: { revalidate: 60 } });
 
// Sin almacenamiento en caché -- siempre fresco
await fetch(url, { cache: "no-store" });
 
// Revalidación basada en etiquetas
await fetch(url, { next: { tags: ["posts"] } });

// lib/api.ts
export type Post = { id: number; title: string; body: string };
 
export async function getPosts(): Promise<Post[]> {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    next: { revalidate: 300, tags: ["posts"] },
  });
 
  if (!res.ok) throw new Error("Failed to fetch posts");
  return res.json();
}
 
export async function getPost(id: number): Promise<Post> {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`,
    { next: { tags: [`post-${id}`] } }
  );
 
  if (!res.ok) throw new Error(`Post ${id} not found`);
  return res.json();
}

// app/posts/page.tsx
import { getPosts } from "@/lib/api";
import Link from "next/link";
 
export default async function PostsPage() {
  const posts = await getPosts();
 
  return (
    <main className="max-w-2xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">Posts</h1>
      <ul className="space-y-2">
        {posts.slice(0, 10).map((post) => (
          <li key={post.id}>
            <Link
              href={`/posts/${post.id}`}
              className="text-blue-600 hover:underline"
            >
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

// app/posts/[id]/page.tsx
import { getPost } from "@/lib/api";
import { notFound } from "next/navigation";
 
type Props = { params: Promise<{ id: string }> };
 
export default async function PostPage({ params }: Props) {
  const { id } = await params;
  const numericId = Number(id);
  if (Number.isNaN(numericId)) notFound();
 
  const post = await getPost(numericId);
 
  return (
    <article className="max-w-2xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-2">{post.title}</h1>
      <p className="text-gray-700 leading-relaxed">{post.body}</p>
    </article>
  );
}

export default async function DashboardPage() {
  // Inicia ambos fetches simultáneamente
  const [users, orders] = await Promise.all([
    fetch("https://api.example.com/users").then((r) => r.json()),
    fetch("https://api.example.com/orders").then((r) => r.json()),
  ]);
 
  return (
    <>
      <UserTable users={users} />
      <OrderList orders={orders} />
    </>
  );
}

import { cache } from "react";
import { db } from "@/lib/db";
 
// Envuelve con React.cache para memoización a nivel de solicitud
export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Componente de Servidor
export default async function Page() {
  const dataPromise = fetchSlowData(); // NO hagas await
  return <ClientChart dataPromise={dataPromise} />;
}

// Siempre tipifica tus respuestas de fetch
type ApiResponse<T> = { data: T; total: number };
 
async function getItems(): Promise<ApiResponse<Item[]>> {
  const res = await fetch("/api/items");
  return res.json();
}
 
// params es una Promise en Next.js 15+
type PageProps = {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};