React Server Components: Mental Model, Pola, dan Jebakan

// Ini adalah Server Component (default)
// Ia bisa async, mengambil data, mengakses database
async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });
 
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* AddToCartButton adalah Client Component — ia butuh onClick */}
      <AddToCartButton productId={product.id} price={product.price} />
    </div>
  );
}

// src/components/AddToCartButton.tsx
"use client";
 
import { useState } from "react";
 
export function AddToCartButton({ productId, price }: { productId: string; price: number }) {
  const [added, setAdded] = useState(false);
 
  return (
    <button
      onClick={() => {
        addToCart(productId);
        setAdded(true);
      }}
    >
      {added ? "Ditambahkan!" : `Tambah ke Keranjang — $${price}`}
    </button>
  );
}

// ClientSidebar.tsx — Client Component yang mengelola state collapse
"use client";
 
import { useState } from "react";
 
export function ClientSidebar({ children }: { children: React.ReactNode }) {
  const [collapsed, setCollapsed] = useState(false);
 
  return (
    <aside className={collapsed ? "w-16" : "w-64"}>
      <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? ">" : "<"}</button>
      {!collapsed && children}
    </aside>
  );
}

// layout.tsx — Server Component
import { ClientSidebar } from "./ClientSidebar";
 
export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const navItems = await getNavigationItems(); // Database query
 
  return (
    <div className="flex">
      <ClientSidebar>
        {/* Ini adalah konten server-rendered yang mengalir MELALUI client component */}
        <nav>
          {navItems.map((item) => (
            <a key={item.href} href={item.href}>
              {item.label}
            </a>
          ))}
        </nav>
      </ClientSidebar>
      <main>{children}</main>
    </div>
  );
}

// InteractiveLayout.tsx — Client Component
"use client";
 
import { useState } from "react";
 
export function InteractiveLayout({
  header,
  sidebar,
  content,
}: {
  header: React.ReactNode;
  sidebar: React.ReactNode;
  content: React.ReactNode;
}) {
  const [sidebarOpen, setSidebarOpen] = useState(true);
 
  return (
    <div className="layout">
      <header>{header}</header>
      <div className="body">
        {sidebarOpen && <aside>{sidebar}</aside>}
        <main>{content}</main>
      </div>
      <button onClick={() => setSidebarOpen(!sidebarOpen)}>Toggle Sidebar</button>
    </div>
  );
}

// page.tsx — Server Component
import { InteractiveLayout } from "./InteractiveLayout";
 
export default async function Page() {
  const user = await getCurrentUser();
  const stats = await getDashboardStats();
 
  return (
    <InteractiveLayout
      header={<UserHeader user={user} />}
      sidebar={<DashboardNav />}
      content={<StatsGrid stats={stats} />}
    />
  );
}

// app/products/page.tsx
export default async function ProductsPage() {
  // Di-cache secara default — URL yang sama mengembalikan hasil cached
  const res = await fetch("https://api.example.com/products");
  const products = await res.json();
 
  return (
    <div>
      {products.map((product: Product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// app/dashboard/page.tsx
import { db } from "@/lib/database";
 
export default async function Dashboard() {
  // Query database langsung di komponen
  const [orders, revenue, activeUsers] = await Promise.all([
    db.order.count({ where: { createdAt: { gte: startOfDay() } } }),
    db.order.aggregate({
      _sum: { total: true },
      where: { createdAt: { gte: startOfMonth() } },
    }),
    db.session.count({ where: { expiresAt: { gte: new Date() } } }),
  ]);
 
  return (
    <div>
      <StatCard label="Order Hari Ini" value={orders} />
      <StatCard label="Pendapatan Bulan Ini" value={revenue._sum.total} />
      <StatCard label="Pengguna Aktif" value={activeUsers} />
    </div>
  );
}

// BURUK: Pengambilan berurutan — setiap await memblokir yang berikutnya
export default async function Page() {
  const user = await getUser(); // 100ms
  const posts = await getPosts(user.id); // 200ms
  const comments = await getComments(); // 150ms
  // Total: 450ms
 
  return <div>...</div>;
}

// BAGUS: Pengambilan paralel — semua dimulai bersamaan
export default async function Page() {
  const userPromise = getUser();
  const commentsPromise = getComments();
 
  const user = await userPromise;
  const [posts, comments] = await Promise.all([
    getPosts(user.id), // Ini tergantung pada user, jadi berurutan
    commentsPromise, // Ini independen, jadi paralel
  ]);
  // Total: ~300ms (user + posts berurutan, comments paralel)
 
  return <div>...</div>;
}

// TERBAIK: Komponen terpisah mengambil data sendiri secara paralel
export default function Page() {
  return (
    <div>
      <Suspense fallback={<UserSkeleton />}>
        <UserSection />
      </Suspense>
      <Suspense fallback={<CommentsSkeleton />}>
        <CommentsSection />
      </Suspense>
    </div>
  );
}
 
async function UserSection() {
  const user = await getUser();
  const posts = await getPosts(user.id);
  return <div>...</div>;
}
 
async function CommentsSection() {
  const comments = await getComments();
  return <div>...</div>;
}

// app/products/page.tsx — Server Component
import { ProductList } from "@/components/ProductList";
 
export default async function ProductsPage() {
  const products = await db.product.findMany({
    select: { id: true, name: true, price: true, image: true },
    orderBy: { createdAt: "desc" },
  });
 
  // Oper data yang sudah di-serialize ke client component
  return <ProductList items={products} />;
}

// src/components/ProductList.tsx — Client Component
"use client";
 
import { useState, useMemo } from "react";
 
export function ProductList({ items }: { items: Product[] }) {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [locale] = useState("id-ID");
 
  // Buat formatter di sisi client
  const formatter = useMemo(() => new Intl.NumberFormat(locale, { style: "currency", currency: "USD" }), [locale]);
 
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id} onClick={() => setSelectedId(item.id)} className={selectedId === item.id ? "selected" : ""}>
          {item.name} — {formatter.format(item.price)}
        </li>
      ))}
    </ul>
  );
}

// app/dashboard/page.tsx
import { Suspense } from "react";
 
export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
 
      {/* Ini langsung di-render — tidak ada pengambilan data */}
      <DashboardNav />
 
      {/* Ini melakukan stream saat data tiba */}
      <Suspense fallback={<StatsSkeleton />}>
        <DashboardStats />
      </Suspense>
 
      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart />
      </Suspense>
 
      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />
      </Suspense>
    </div>
  );
}
 
// Setiap komponen ini adalah async Server Component
async function DashboardStats() {
  const stats = await getStats(); // 200ms
  return <StatsGrid data={stats} />;
}
 
async function RevenueChart() {
  const data = await getRevenueData(); // 800ms
  return <Chart data={data} />;
}
 
async function RecentOrders() {
  const orders = await getRecentOrders(); // 400ms
  return <OrderTable orders={orders} />;
}

<Suspense fallback={<DashboardSkeleton />}>
  <Dashboard>
    <Suspense fallback={<ChartSkeleton />}>
      <RevenueChart />
    </Suspense>
    <Suspense fallback={<TableSkeleton />}>
      <RecentTransactions />
    </Suspense>
  </Dashboard>
</Suspense>

// app/dashboard/error.tsx — Client Component (harus)
"use client";
 
export default function DashboardError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <div className="p-8 text-center">
      <h2>Ada yang salah saat memuat dashboard</h2>
      <p className="text-gray-500">{error.message}</p>
      <button onClick={reset} className="mt-4 px-4 py-2 bg-blue-600 text-white rounded">
        Coba lagi
      </button>
    </div>
  );
}

"use client";
// window, document, navigator, localStorage, dll.
function GeoLocation() {
  const [coords, setCoords] = useState<GeolocationCoordinates | null>(null);
 
  useEffect(() => {
    navigator.geolocation.getCurrentPosition((pos) => setCoords(pos.coords));
  }, []);
 
  return coords ? <p>Lat: {coords.latitude}</p> : <p>Memuat lokasi...</p>;
}

"use client";
function SearchBar() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);
 
  // Komponen ini HARUS menjadi Client Component karena
  // menggunakan useState dan mengelola input pengguna
  return <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Cari..." />;
}

// BURUK: mengambil data di Server Component, lalu meneruskannya melalui
// beberapa Client Components
 
// app/page.tsx (Server)
export default async function Page() {
  const user = await getUser();
  const settings = await getSettings();
  const theme = await getTheme();
 
  return (
    <ClientShell user={user} settings={settings} theme={theme}>
      <ClientContent user={user} settings={settings}>
        <ClientWidget user={user} />
      </ClientContent>
    </ClientShell>
  );
}

// BAGUS: Server Components mengambil data sendiri, diteruskan sebagai children
 
// app/page.tsx (Server)
export default function Page() {
  return (
    <ClientShell>
      <UserInfo /> {/* Server Component — mengambil data sendiri */}
      <Settings /> {/* Server Component — mengambil data sendiri */}
      <ClientWidget>
        <UserAvatar /> {/* Server Component — mengambil data sendiri */}
      </ClientWidget>
    </ClientShell>
  );
}

// BURUK: semua menunggu semua
export default async function Dashboard() {
  const stats = await getStats(); // 200ms
  const chart = await getChartData(); // 300ms
  const analytics = await getAnalytics(); // 4000ms ← memblokir semuanya
 
  return (
    <div>
      <Stats data={stats} />
      <Chart data={chart} />
      <Analytics data={analytics} />
    </div>
  );
}

// BAGUS: analytics dimuat secara independen
export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<StatsSkeleton />}>
        <Stats />
      </Suspense>
      <Suspense fallback={<ChartSkeleton />}>
        <Chart />
      </Suspense>
      <Suspense fallback={<AnalyticsSkeleton />}>
        <Analytics /> {/* Butuh 4 detik tapi tidak memblokir sisanya */}
      </Suspense>
    </div>
  );
}

// BURUK
const user = await prisma.user.findUnique({ where: { id } });
// user mungkin memiliki field non-serializable (Decimal, BigInt, dll.)
return <ClientProfile user={user} />;
 
// BAGUS
const user = await prisma.user.findUnique({ where: { id } });
const serializedUser = {
  id: user.id,
  name: user.name,
  email: user.email,
  balance: user.balance.toNumber(), // Decimal → number
  createdAt: user.createdAt.toISOString(), // Date → string
};
return <ClientProfile user={serializedUser} />;

// app/layout.tsx (Server Component)
import { cookies } from "next/headers";
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const cookieStore = await cookies();
  const theme = cookieStore.get("theme")?.value ?? "light";
 
  return (
    <html data-theme={theme} className={theme === "dark" ? "dark" : ""}>
      <body>{children}</body>
    </html>
  );
}

// src/providers/CartProvider.tsx
"use client";
 
import { createContext, useContext, useState } from "react";
 
const CartContext = createContext<CartContextType | null>(null);
 
export function CartProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<CartItem[]>([]);
 
  return <CartContext.Provider value={{ items, setItems }}>{children}</CartContext.Provider>;
}
 
export function useCart() {
  const context = useContext(CartContext);
  if (!context) throw new Error("useCart harus digunakan dalam CartProvider");
  return context;
}

// app/shop/layout.tsx (Server Component)
import { CartProvider } from "@/providers/CartProvider";
 
export default function ShopLayout({ children }: { children: React.ReactNode }) {
  // CartProvider adalah Client Component, tapi children mengalir sebagai konten server
  return <CartProvider>{children}</CartProvider>;
}

// Server Component — marked tetap di server
import { marked } from "marked"; // Library 50KB — tidak pernah dikirim ke client
 
async function BlogContent({ slug }: { slug: string }) {
  const post = await getPost(slug);
  const html = marked(post.markdown);
 
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

import { cache } from "react";
 
export const getCurrentUser = cache(async () => {
  const session = await getSession();
  if (!session) return null;
 
  return db.user.findUnique({ where: { id: session.userId } });
});
 
// Panggil ini di mana saja di component tree selama satu request.
// Hanya satu query database yang benar-benar dieksekusi.

import { unstable_cache } from "next/cache";
 
const getCachedProducts = unstable_cache(
  async (categoryId: string) => {
    return db.product.findMany({
      where: { categoryId },
      include: { images: true },
    });
  },
  ["products-by-category"], // prefix cache key
  {
    revalidate: 3600, // revalidasi setiap jam
    tags: ["products"], // untuk revalidasi on-demand
  },
);
 
// Penggunaan di Server Component
async function ProductGrid({ categoryId }: { categoryId: string }) {
  const products = await getCachedProducts(categoryId);
  return <Grid items={products} />;
}

"use server";
 
import { revalidateTag } from "next/cache";
 
export async function onProductUpdate() {
  revalidateTag("products");
}

// lib/data/products.ts
 
import { cache } from "react";
import { unstable_cache } from "next/cache";
import { db } from "@/lib/database";
 
// Deduplikasi per-request: panggil ini beberapa kali dalam satu render,
// hanya satu query DB yang berjalan
export const getProductById = cache(async (id: string) => {
  return db.product.findUnique({
    where: { id },
    include: { category: true, images: true },
  });
});
 
// Cache lintas request: hasil bertahan lintas request,
// revalidasi setiap 5 menit atau on-demand via tag
export const getPopularProducts = unstable_cache(
  async () => {
    return db.product.findMany({
      orderBy: { salesCount: "desc" },
      take: 20,
      include: { images: true },
    });
  },
  ["popular-products"],
  { revalidate: 300, tags: ["products"] },
);
 
// Tanpa caching: selalu fresh (untuk data user-specific)
export const getUserCart = cache(async (userId: string) => {
  // cache() di sini hanya untuk deduplikasi per-request, bukan persistensi
  return db.cart.findUnique({
    where: { userId },
    include: { items: { include: { product: true } } },
  });
});

// app/actions/newsletter.ts
"use server";
 
import { db } from "@/lib/database";
import { z } from "zod";
 
const emailSchema = z.string().email();
 
export async function subscribeToNewsletter(formData: FormData) {
  const email = formData.get("email");
 
  const result = emailSchema.safeParse(email);
  if (!result.success) {
    return { error: "Alamat email tidak valid" };
  }
 
  try {
    await db.subscriber.create({
      data: { email: result.data },
    });
    return { success: true };
  } catch (e) {
    if (e instanceof Error && e.message.includes("Unique constraint")) {
      return { error: "Sudah berlangganan" };
    }
    return { error: "Ada yang salah" };
  }
}

// src/components/NewsletterForm.tsx
"use client";
 
import { useActionState } from "react";
import { subscribeToNewsletter } from "@/app/actions/newsletter";
 
export function NewsletterForm() {
  const [state, formAction, isPending] = useActionState(
    async (_prev: { error?: string; success?: boolean } | null, formData: FormData) => {
      return subscribeToNewsletter(formData);
    },
    null,
  );
 
  return (
    <form action={formAction}>
      <input type="email" name="email" required placeholder="you@example.com" disabled={isPending} />
      <button type="submit" disabled={isPending}>
        {isPending ? "Mendaftar..." : "Berlangganan"}
      </button>
      {state?.error && <p className="text-red-500">{state.error}</p>}
      {state?.success && <p className="text-green-500">Berhasil berlangganan!</p>}
    </form>
  );
}

// Pola lama — pengambilan data di Client Component
"use client";
 
function ProductPage({ id }: { id: string }) {
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then((res) => res.json())
      .then((data) => setProduct(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id]);
 
  if (loading) return <Spinner />;
  if (error) return <Error message={error} />;
  if (!product) return <NotFound />;
 
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCartButton productId={product.id} />
    </div>
  );
}

// Pola baru — Server Component mengambil data, Client Component berinteraksi
 
// app/products/[id]/page.tsx (Server Component)
import { db } from "@/lib/database";
import { notFound } from "next/navigation";
import { AddToCartButton } from "@/components/AddToCartButton";
 
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });
 
  if (!product) notFound();
 
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCartButton productId={product.id} price={product.price} />
    </div>
  );
}

"use client";
 
function ProductCard({ product }: { product: Product }) {
  const [isFavorite, setIsFavorite] = useState(false);
 
  return (
    <div className="card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <span>${product.price}</span>
      <button onClick={() => setIsFavorite(!isFavorite)}>{isFavorite ? "♥" : "♡"}</button>
    </div>
  );
}

// ProductCard.tsx (Server Component)
import { FavoriteButton } from "./FavoriteButton";
 
function ProductCard({ product }: { product: Product }) {
  return (
    <div className="card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <span>${product.price}</span>
      <FavoriteButton productId={product.id} />
    </div>
  );
}

// FavoriteButton.tsx (Client Component)
"use client";
 
import { useState } from "react";
 
export function FavoriteButton({ productId }: { productId: string }) {
  const [isFavorite, setIsFavorite] = useState(false);
 
  return (
    <button
      onClick={() => setIsFavorite(!isFavorite)}
      aria-label={isFavorite ? "Hapus dari favorit" : "Tambah ke favorit"}
    >
      {isFavorite ? "♥" : "♡"}
    </button>
  );
}

// app/api/contact/route.ts
export async function POST(request: Request) {
  const body = await request.json();
  // validasi, simpan ke DB, kirim email
  return Response.json({ success: true });
}
 
// Client component
const response = await fetch("/api/contact", {
  method: "POST",
  body: JSON.stringify(formData),
});

// app/actions/contact.ts
"use server";
 
export async function submitContactForm(formData: FormData) {
  // validasi, simpan ke DB, kirim email
  return { success: true };
}
 
// Client component — panggil fungsi langsung
import { submitContactForm } from "@/app/actions/contact";

// __tests__/ProductPage.test.tsx
import { render, screen } from "@testing-library/react";
import ProductPage from "@/app/products/[id]/page";
 
// Mock database
vi.mock("@/lib/database", () => ({
  db: {
    product: {
      findUnique: vi.fn(),
    },
  },
}));
 
describe("ProductPage", () => {
  it("merender detail produk", async () => {
    const { db } = await import("@/lib/database");
    vi.mocked(db.product.findUnique).mockResolvedValue({
      id: "1",
      name: "Produk Test",
      description: "Produk yang bagus",
      price: 29.99,
    });
 
    // Server Components adalah async — await JSX-nya
    const jsx = await ProductPage({
      params: Promise.resolve({ id: "1" }),
    });
    render(jsx);
 
    expect(screen.getByText("Produk Test")).toBeInTheDocument();
    expect(screen.getByText("Produk yang bagus")).toBeInTheDocument();
  });
});