AI-рефакторинг Next.js проєктів: RSC межі, Donut Pattern та бандл

[ Плохо: Утечка ]                [ Хорошо: Donut Pattern ]
'use client' (Page)              (Server Component)
    |                                   |
[HeavyLibrary]                   [Client Interactive] (Дырка от пончика)
    |                                   |
[Static Text]                    [children: Server Component] (Внедрение через пропсы)

'use client'; // Утечка на уровень всего дашборда

import { useState } from 'react';
import { HeavyChart } from 'heavy-chart-lib';
import { StaticSidebar } from './StaticSidebar';
import { Header } from './Header';

export function Dashboard({ data }: { data: any }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Header />
      <StaticSidebar /> {/* Статика попала в клиентский бандл */}
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && <HeavyChart data={data} />}
    </div>
  );
}

// Server Component по умолчанию
import { StaticSidebar } from '@/components/StaticSidebar';
import { Header } from '@/components/Header';
import { ClientToggleWrapper } from '@/components/ClientToggleWrapper';

export default function DashboardPage({ data }: { data: any }) {
  return (
    <div>
      <Header />
      <StaticSidebar />
      {/* 
        ClientToggleWrapper - это "дырка", 
        но внутрь нее можно передать RSC (дети) 
      */}
      <ClientToggleWrapper data={data} />
    </div>
  );
}

'use client'; // Интерактивность изолирована

import { useState } from 'react';
import { HeavyChart } from 'heavy-chart-lib';

export function ClientToggleWrapper({ data }: { data: any }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && <HeavyChart data={data} />}
    </>
  );
}