Патерни композиції в Next.js: Interleaving та Donut Pattern

'use client';

import { useState } from 'react';

interface CollapsibleSidebarProps {
  children: React.ReactNode; // Серверний слот
}

export function CollapsibleSidebar({ children }: CollapsibleSidebarProps) {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="flex">
      <aside className={`transition-all duration-300 ${isOpen ? 'w-64' : 'w-16'}`}>
        <button 
          type="button" 
          onClick={() => setIsOpen(!isOpen)}
          className="p-2 border border-border rounded bg-bg-elevated text-xs mb-4"
        >
          {isOpen ? 'Згорнути' : 'Розгорнути'}
        </button>

        {/* Тут рендериться готовий серверний вузол. Код БД не потрапляє в клієнтський бандл! */}
        <div className={isOpen ? 'block' : 'hidden'}>
          {children}
        </div>
      </aside>
    </div>
  );
}

import { CollapsibleSidebar } from '@/components/CollapsibleSidebar';
import { ServerNavigationTree } from '@/components/ServerNavigationTree'; // Серверна бібліотека + запит до БД

export default async function DashboardPage() {
  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold mb-6">Панель керування</h1>

      {/* Donut Pattern: передаємо серверний компонент у клієнтську оболонку */}
      <CollapsibleSidebar>
        <ServerNavigationTree />
      </CollapsibleSidebar>
    </main>
  );
}

'use client';

import { useState } from 'react';

interface SplitLayoutProps {
  sidebarSlot: React.ReactNode;
  contentSlot: React.ReactNode;
}

export function SplitLayout({ sidebarSlot, contentSlot }: SplitLayoutProps) {
  const [activePane, setActivePane] = useState<'both' | 'content'>('both');

  return (
    <div className="flex gap-6 min-h-screen">
      {activePane === 'both' && (
        <aside className="w-1/3 border-r border-border p-4">
          <button 
            type="button" 
            onClick={() => setActivePane('content')} 
            className="text-xs text-accent-cyan mb-3 block"
          >
            Фокус на контенті →
          </button>
          {sidebarSlot}
        </aside>
      )}

      <section className="flex-1 p-4">
        {activePane === 'content' && (
          <button 
            type="button" 
            onClick={() => setActivePane('both')} 
            className="text-xs text-accent-cyan mb-3 block"
          >
            ← Показати сайдбар
          </button>
        )}
        {contentSlot}
      </section>
    </div>
  );
}

'use client';

import { ThemeProvider } from 'next-themes';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      {/* Всі вкладені серверні компоненти зберігають свій серверний життєвий цикл! */}
      {children}
    </ThemeProvider>
  );
}

import { AppProviders } from '@/components/providers/AppProviders';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="uk" suppressHydrationWarning>
      <body className="bg-bg-base text-text-primary">
        {/* Кореневий макет залишається Server Component! */}
        <AppProviders>
          {children}
        </AppProviders>
      </body>
    </html>
  );
}

'use client';

import { useTransition } from 'react';
import { useRouter, usePathname } from 'next/navigation';

export function SearchInput({ defaultValue = '' }: { defaultValue?: string }) {
  const router = useRouter();
  const pathname = usePathname();
  const [isPending, startTransition] = useTransition();

  const handleSearch = (term: string) => {
    const params = new URLSearchParams(window.location.search);
    if (term) {
      params.set('q', term);
    } else {
      params.delete('q');
    }
    startTransition(() => {
      router.replace(`${pathname}?${params.toString()}`);
    });
  };

  return (
    <div className="relative">
      <input
        type="search"
        defaultValue={defaultValue}
        placeholder="Пошук документації..."
        onChange={(e) => handleSearch(e.target.value)}
        className="w-full px-4 py-2 rounded-lg bg-bg-elevated border border-border text-sm focus:outline-none focus:border-accent-cyan"
      />
      {isPending && <span className="absolute right-3 top-2.5 text-xs text-text-muted animate-spin">⏳</span>}
    </div>
  );
}

import { SearchInput } from '@/components/SearchInput';
import { HeavyArticleList } from '@/components/HeavyArticleList'; // Server Component з markdown-парсером

interface PageProps {
  searchParams: Promise<{ q?: string }>;
}

export default async function DocsPage({ searchParams }: PageProps) {
  const { q } = await searchParams;

  return (
    <div className="max-w-4xl mx-auto p-8 space-y-6">
      <h1 className="text-3xl font-bold">База знань</h1>
      
      {/* Інтерактивний клієнтський листок */}
      <SearchInput defaultValue={q} />

      {/* Серверний список: 0 байтів JS у клієнтському бандлі */}
      <HeavyArticleList query={q ?? ''} />
    </div>
  );
}

'use client';

import { useTransition } from 'react';

interface ActionButtonProps {
  action: () => Promise<void>; // Server Action передається через пропс!
  label: string;
}

export function ActionButton({ action, label }: ActionButtonProps) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      type="button"
      disabled={isPending}
      onClick={() => startTransition(async () => { await action(); })}
      className="px-4 py-2 rounded-lg bg-accent-violet text-white text-sm font-medium hover:bg-accent-violet/90 transition-colors disabled:opacity-50"
    >
      {isPending ? 'Виконується...' : label}
    </button>
  );
}

// ❌ ПОМИЛКА: Синхронна стрілкова функція в Server Component
// return <ClientButton onClick={() => console.log('delete')} />;

// ✅ ПРАВИЛЬНО: Використовувати Server Action для серверних мутацій
// app/actions.ts:
// 'use server';
// export async function deleteItemAction(id: string) { await db.item.delete({ where: { id } }); }

// app/page.tsx:
// <ClientButton action={deleteItemAction} />