Server та Client Компоненти в Next.js: Архітектура двох світів

import { notFound } from 'next/navigation';
import { db } from '@/lib/db';

interface PageProps {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function UserPage({ params, searchParams }: PageProps) {
  // У Next.js 15+ доступ до params та searchParams асинхронний
  const { id } = await params;
  const query = await searchParams;
  const activeTab = typeof query.tab === 'string' ? query.tab : 'overview';

  // Прямий запит до бази даних без проміжних fetch/REST API
  const user = await db.user.findUnique({
    where: { id },
    select: { id: true, name: true, email: true, role: true }
  });

  if (!user) {
    notFound();
  }

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold text-text-primary">{user.name}</h1>
      <p className="text-text-muted">{user.email}</p>
      <div className="mt-4 text-xs font-mono text-accent-cyan">
        Активна вкладка: {activeTab}
      </div>
    </div>
  );
}

'use client';

import { useState, useTransition } from 'react';

interface CounterProps {
  initialCount?: number;
}

export function Counter({ initialCount = 0 }: CounterProps) {
  const [count, setCount] = useState(initialCount);
  const [isPending, startTransition] = useTransition();

  const handleIncrement = () => {
    startTransition(() => {
      setCount((prev) => prev + 1);
    });
  };

  return (
    <div className="flex items-center gap-4">
      <button
        type="button"
        disabled={isPending}
        onClick={handleIncrement}
        className="px-4 py-2 rounded-lg bg-accent-violet hover:bg-accent-violet/90 text-white font-medium transition-colors disabled:opacity-50"
      >
        Інкремент: {count}
      </button>
      {isPending && <span className="text-xs text-text-muted">Оновлення...</span>}
    </div>
  );
}

'use client';

import { useState } from 'react';

interface ModalDialogProps {
  triggerLabel: string;
  children: React.ReactNode; // Серверний компонент передається зовні!
}

export function ModalDialog({ triggerLabel, children }: ModalDialogProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => setIsOpen(true)}
        className="px-3 py-1.5 rounded-md bg-bg-elevated border border-border text-sm"
      >
        {triggerLabel}
      </button>

      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="bg-bg-surface border border-border rounded-xl p-6 max-w-lg w-full">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-bold">Деталі</h2>
              <button type="button" onClick={() => setIsOpen(false)}>✕</button>
            </div>
            {/* Тут рендериться серверний слот, залишаючись серверним кодом */}
            {children}
          </div>
        </div>
      )}
    </>
  );
}

import { ModalDialog } from '@/components/ModalDialog';
import { HeavyAnalyticsChart } from '@/components/HeavyAnalyticsChart'; // Server Component з важкими бібліотеками

export default async function DashboardPage() {
  return (
    <main className="p-6">
      <h1 className="text-xl font-bold mb-4">Аналітика</h1>

      {/* Donut Pattern: передаємо Server Component як children у Client Component */}
      <ModalDialog triggerLabel="Відкрити звіт">
        <HeavyAnalyticsChart />
      </ModalDialog>
    </main>
  );
}

import { Suspense } from 'react';
import { ItemComments } from './ItemComments';
import { fetchCommentsPromise } from '@/lib/data';

export default async function ItemPage({
  params
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  // Ініціюємо запит БЕЗ await: проміс починає виконуватися у фоні
  const commentsPromise = fetchCommentsPromise(id);

  return (
    <div>
      <h1>Картка товару #{id}</h1>

      {/* Огортаємо в Suspense для відображення скелетона під час резолву промісу */}
      <Suspense fallback={<p className="text-text-muted">Завантаження коментарів...</p>}>
        <ItemComments commentsPromise={commentsPromise} />
      </Suspense>
    </div>
  );
}

'use client';

import { use } from 'react';

interface Comment {
  id: string;
  author: string;
  text: string;
}

export function ItemComments({
  commentsPromise
}: {
  commentsPromise: Promise<Comment[]>;
}) {
  // React 19 хук use() розгортає проміс напряму всередині клієнтського компонента
  const comments = use(commentsPromise);

  return (
    <div className="space-y-3 mt-4">
      <h3 className="font-semibold text-text-primary">Коментарі ({comments.length}):</h3>
      {comments.map((comment) => (
        <div key={comment.id} className="p-3 rounded-lg border border-border bg-bg-elevated/40">
          <span className="font-medium text-accent-cyan text-sm">{comment.author}</span>
          <p className="text-sm text-text-muted mt-1">{comment.text}</p>
        </div>
      ))}
    </div>
  );
}

pnpm add server-only

import 'server-only';
import { experimental_taintObjectReference } from 'react';
import { db } from '@/lib/db';

export async function getUserAccount(id: string) {
  const user = await db.user.findUnique({
    where: { id }
  });

  if (user) {
    // Якщо хтось спробує передати об'єкт user цілком у Client Component,
    // React негайно викине помилку при збірці або рендері
    experimental_taintObjectReference(
      'Заборонено передавати сирий об\'єкт користувача в клієнтський компонент для запобігання витоку хешу пароля',
      user
    );
  }

  return user;
}

// ❌ АНТИПАТЕРН: Весь запис іде у відкритий RSC Flight Payload
const user = await db.user.findUnique({ where: { id } });
return <UserBadge user={user} />;

// ✅ ПРАВИЛЬНО: Серіалізуються лише публічні властивості
return <UserBadge name={user.name} avatarUrl={user.avatarUrl} />;