React Server Components: Ментальні моделі, патерни та підводні камені

// app/dashboard/page.tsx — this is a Server Component by default
import { db } from "@/lib/database";
import { headers } from "next/headers";
 
export default async function DashboardPage() {
  const headerList = await headers();
  const userId = headerList.get("x-user-id");
 
  // Direct database query. No API route needed.
  const user = await db.user.findUnique({
    where: { id: userId },
  });
 
  const recentOrders = await db.order.findMany({
    where: { userId: user.id },
    orderBy: { createdAt: "desc" },
    take: 10,
  });
 
  return (
    <div>
      <h1>Welcome back, {user.name}</h1>
      <OrderList orders={recentOrders} />
    </div>
  );
}

// components/Counter.tsx
"use client";
 
import { useState } from "react";
 
export function Counter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// ✅ These props work across the boundary
<ClientComponent
  name="John"                    // string
  count={42}                     // number
  isActive={true}                // boolean
  items={["a", "b", "c"]}       // array of primitives
  config={{ theme: "dark" }}     // plain object
  createdAt={new Date()}         // Date (serialized specially)
  id={null}                      // null
/>
 
// ❌ These props CANNOT cross the boundary
<ClientComponent
  onClick={() => doSomething()}  // Function — not serializable
  ref={myRef}                    // Ref — not serializable
  component={MyComponent}        // React component — not serializable
  db={databaseConnection}        // Complex object — not serializable
  stream={readableStream}        // Stream — not serializable
/>

// ✅ This works — Server Component renders Client Component
// app/page.tsx (Server Component)
import { InteractivePanel } from "@/components/InteractivePanel";
import { db } from "@/lib/database";
 
export default async function Page() {
  const data = await db.analytics.getStats();
 
  return (
    <div>
      <h1>Dashboard</h1>
      <InteractivePanel initialData={data} />
    </div>
  );
}

// ✅ This works — Server Component as children of Client Component
// app/layout.tsx (Server Component)
import { SidebarProvider } from "@/components/SidebarProvider";
import { Navigation } from "@/components/Navigation";
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <Navigation />
      <main>{children}</main>
    </SidebarProvider>
  );
}

// components/SidebarProvider.tsx
"use client";
 
import { createContext, useState } from "react";
 
export function SidebarProvider({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
 
  return <SidebarContext.Provider value={{ isOpen, setIsOpen }}>{children}</SidebarContext.Provider>;
}

// components/UserProfile.tsx
"use client"; // This is a Client Component
 
import { useState } from "react";
import { UserAvatar } from "./UserAvatar"; // This ALSO becomes a Client Component
 
export function UserProfile({ user }: { user: User }) {
  const [expanded, setExpanded] = useState(false);
 
  return (
    <div>
      <UserAvatar src={user.avatar} /> {/* Client Component now */}
      <button onClick={() => setExpanded(!expanded)}>{expanded ? "Less" : "More"}</button>
      {expanded && <p>{user.bio}</p>}
    </div>
  );
}

// app/profile/page.tsx (Server Component)
import { ExpandableSection } from "@/components/ExpandableSection";
import { UserAvatar } from "@/components/UserAvatar";
 
export default async function ProfilePage() {
  const user = await getUser();
 
  return (
    <div>
      <UserAvatar src={user.avatar} /> {/* Stays a Server Component */}
      <ExpandableSection>
        <p>{user.bio}</p>
      </ExpandableSection>
    </div>
  );
}

// components/ExpandableSection.tsx
"use client";
 
import { useState } from "react";
 
export function ExpandableSection({ children }: { children: React.ReactNode }) {
  const [expanded, setExpanded] = useState(false);
 
  return (
    <div>
      <button onClick={() => setExpanded(!expanded)}>{expanded ? "Less" : "More"}</button>
      {expanded && children}
    </div>
  );
}

// app/posts/page.tsx
import { db } from "@/lib/database";
 
export default async function PostsPage() {
  // This runs on the server. The database query never reaches the client.
  const posts = await db.post.findMany({
    where: { published: true },
    orderBy: { createdAt: "desc" },
    take: 20,
    include: {
      author: {
        select: { name: true, avatar: true },
      },
    },
  });
 
  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

import { Suspense } from "react";
 
export default function DashboardPage() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {/* This renders immediately */}
      <h1 className="col-span-3 text-3xl font-bold">Dashboard</h1>
 
      {/* Each section streams independently */}
      <Suspense fallback={<CardSkeleton />}>
        <RevenueCard />
      </Suspense>
 
      <Suspense fallback={<CardSkeleton />}>
        <UserStatsCard />
      </Suspense>
 
      <Suspense fallback={<CardSkeleton />}>
        <RecentOrdersCard />
      </Suspense>
    </div>
  );
}
 
// Each of these is an async Server Component
async function RevenueCard() {
  const revenue = await db.analytics.getRevenue(); // Maybe takes 200ms
  return <Card title="Revenue" value={formatCurrency(revenue)} />;
}
 
async function UserStatsCard() {
  const stats = await db.analytics.getUserStats(); // Maybe takes 150ms
  return <Card title="Active Users" value={stats.activeUsers} />;
}
 
async function RecentOrdersCard() {
  const orders = await db.order.findMany({ take: 5 }); // Maybe takes 300ms
  return <OrderList orders={orders} />;
}

// components/Header.tsx (Server Component)
async function Header() {
  const user = await getUser(); // Query 1
  return <nav>Welcome, {user.name}</nav>;
}
 
// components/Sidebar.tsx (Server Component)
async function Sidebar() {
  const user = await getUser(); // Query 2 — same data!
  return <aside>Role: {user.role}</aside>;
}

// lib/data.ts
import { cache } from "react";
import { db } from "./database";
 
export const getUser = cache(async (userId: string) => {
  return db.user.findUnique({ where: { id: userId } });
});

// Static data — cached indefinitely by default
const posts = await fetch("https://api.example.com/posts");
 
// Revalidate every 60 seconds
const posts = await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 },
});
 
// Never cache (always fresh)
const posts = await fetch("https://api.example.com/posts", {
  cache: "no-store",
});

// app/blog/page.tsx
export const revalidate = 3600; // Revalidate this page every hour
export const dynamic = "force-dynamic"; // Never cache
 
export default async function BlogPage() {
  const posts = await db.post.findMany();
  // ...
}

// app/actions.ts
"use server";
 
import { db } from "@/lib/database";
import { revalidatePath } from "next/cache";
 
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;
 
  await db.post.create({
    data: { title, content, published: false },
  });
 
  revalidatePath("/posts");
}

// components/CreatePostForm.tsx
"use client";
 
import { createPost } from "@/app/actions";
 
export function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" type="text" required />
      <textarea name="content" required />
      <button type="submit">Create Post</button>
    </form>
  );
}

"use server";
 
import { z } from "zod";
import { db } from "@/lib/database";
import { revalidatePath } from "next/cache";
import { headers } from "next/headers";
 
const createPostSchema = z.object({
  title: z.string().min(1).max(200),
  content: z.string().min(1).max(50000),
});
 
export async function createPost(formData: FormData) {
  // Validate input
  const parsed = createPostSchema.safeParse({
    title: formData.get("title"),
    content: formData.get("content"),
  });
 
  if (!parsed.success) {
    return { error: parsed.error.flatten() };
  }
 
  // Verify authentication
  const headerList = await headers();
  const userId = headerList.get("x-user-id");
  if (!userId) {
    return { error: "Unauthorized" };
  }
 
  // Execute mutation
  const post = await db.post.create({
    data: {
      ...parsed.data,
      authorId: userId,
      published: false,
    },
  });
 
  revalidatePath("/posts");
  return { success: true, postId: post.id };
}

"use client";
 
import { useOptimistic, useTransition } from "react";
import { toggleLike } from "@/app/actions";
 
export function LikeButton({
  postId,
  initialLiked,
  initialCount,
}: {
  postId: string;
  initialLiked: boolean;
  initialCount: number;
}) {
  const [isPending, startTransition] = useTransition();
  const [optimistic, setOptimistic] = useOptimistic(
    { liked: initialLiked, count: initialCount },
    (state, newLiked: boolean) => ({
      liked: newLiked,
      count: state.count + (newLiked ? 1 : -1),
    }),
  );
 
  function handleClick() {
    startTransition(async () => {
      setOptimistic(!optimistic.liked);
      await toggleLike(postId);
    });
  }
 
  return (
    <button onClick={handleClick} disabled={isPending}>
      {optimistic.liked ? "♥" : "♡"} {optimistic.count}
    </button>
  );
}

// app/products/page.tsx (Server Component)
import { db } from "@/lib/database";
import { ProductGrid } from "@/components/ProductGrid";
 
export default async function ProductsPage() {
  const products = await db.product.findMany({
    where: { active: true },
    include: { category: true },
  });
 
  const categories = await db.category.findMany();
 
  // Pass serializable data to Client Component
  return (
    <ProductGrid
      products={products.map((p) => ({
        id: p.id,
        name: p.name,
        price: p.price,
        category: p.category.name,
        image: p.image,
      }))}
      categories={categories.map((c) => c.name)}
    />
  );
}

// components/ProductGrid.tsx
"use client";
 
import { useState, useTransition } from "react";
 
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  image: string;
}
 
export function ProductGrid({ products, categories }: { products: Product[]; categories: string[] }) {
  const [filter, setFilter] = useState<string>("all");
  const [sort, setSort] = useState<"price" | "name">("name");
 
  const filtered = products
    .filter((p) => filter === "all" || p.category === filter)
    .sort((a, b) => (sort === "price" ? a.price - b.price : a.name.localeCompare(b.name)));
 
  return (
    <div>
      <div className="flex gap-2 mb-4">
        <select value={filter} onChange={(e) => setFilter(e.target.value)}>
          <option value="all">All Categories</option>
          {categories.map((c) => (
            <option key={c} value={c}>
              {c}
            </option>
          ))}
        </select>
        <select value={sort} onChange={(e) => setSort(e.target.value as "price" | "name")}>
          <option value="name">Sort by Name</option>
          <option value="price">Sort by Price</option>
        </select>
      </div>
      <div className="grid grid-cols-3 gap-4">
        {filtered.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

// app/layout.tsx (Server Component)
import { ThemeProvider } from "@/components/ThemeProvider";
import { CartProvider } from "@/components/CartProvider";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ThemeProvider>
          <CartProvider>
            {children} {/* Server Components can be children */}
          </CartProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

// app/dashboard/page.tsx
import { Suspense } from "react";
 
export default function DashboardPage() {
  return (
    <div className="grid grid-cols-2 gap-6">
      <Suspense fallback={<Skeleton />}>
        <UserStats />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <RevenueChart />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <RecentActivity />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <TopProducts />
      </Suspense>
    </div>
  );
}

// ❌ Don't pass ORM models directly
<ClientComponent user={user} />
 
// ✅ Do map to plain serializable objects
<ClientComponent
  user={{
    id: user.id,
    name: user.name,
    email: user.email,
    createdAt: user.createdAt.toISOString(),
  }}
/>

// Development: always fresh data
export const dynamic = "force-dynamic";
 
// Production: choose appropriate caching
export const revalidate = 3600; // 1 hour

import { Suspense } from "react";
import { ErrorBoundary } from "@/components/ErrorBoundary";
 
export default function Page() {
  return (
    <ErrorBoundary fallback={<p>Something went wrong</p>}>
      <Suspense fallback={<Skeleton />}>
        <AsyncComponent />
      </Suspense>
    </ErrorBoundary>
  );
}