React Server Components - 'use client' Causes 2.1MB Bloat

// This is a Server Component (no 'use client')
// It runs on the server, fetches data, and sends serialized HTML to the client
// Zero JavaScript shipped for this component

import { db } from '@/lib/db';
import { Suspense } from 'react';
import { InteractiveChart } from './InteractiveChart'; // Client Component
import { DataTable } from './DataTable';               // Server Component

// Server Component: fetches data directly — no API route needed
export default async function DashboardPage() {
  // Parallel fetches — no waterfall
  const [metrics, recentOrders] = await Promise.all([
    db.metrics.findMany({ orderBy: { date: 'desc' }, take: 30 }),
    db.orders.findMany({ orderBy: { createdAt: 'desc' }, take: 50 }),
  ]);

  return (
    <div>
      <h1>Dashboard</h1>

      {/* Server Component: renders table HTML on server, zero JS shipped */}
      <DataTable orders={recentOrders} />

      {/* Client Component: needs useState for zoom/pan interaction */}
      {/* Suspense boundary: streams the chart independently */}
      <Suspense fallback={<div>Loading chart...</div>}>
        <InteractiveChart data={metrics} />
      </Suspense>
    </div>
  );
}

import { Suspense } from 'react';
import { RevenueCard } from './RevenueCard';
import { UserGrowthCard } from './UserGrowthCard';
import { ErrorRateCard } from './ErrorRateCard';

// GOOD: Each child fetches its own data — all 3 fetch in parallel + automatic deduplication
// Total: max(150, 200, 100) = 200ms parallel
export default function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Suspense fallback={<CardSkeleton />}>
        <RevenueCard />        {/* fetches revenue — 150ms */}
      </Suspense>

      <Suspense fallback={<CardSkeleton />}>
        <UserGrowthCard />     {/* fetches users — 200ms */}
      </Suspense>

      <Suspense fallback={<CardSkeleton />}>
        <ErrorRateCard />      {/* fetches errors — 100ms */}
      </Suspense>
    </div>
  );
}

function CardSkeleton() {
  return <div className="animate-pulse bg-gray-200 h-48 rounded-lg" />;
}

// Server Component: renders the full table on the server
// Only the sort controls are Client Components
import { SortControls } from './SortControls'; // 'use client'

interface Order {
  id: string;
  customer: string;
  amount: number;
  status: string;
  createdAt: string; // ISO string, NOT Date — must be JSON-serializable
}

export default async function DataTable({
  orders,
  sortBy,
}: {
  orders: Order[];
  sortBy: string;
}) {
  const sorted = [...orders].sort((a, b) => {
    if (sortBy === 'amount') return b.amount - a.amount;
    if (sortBy === 'date') return b.createdAt.localeCompare(a.createdAt);
    return 0;
  });

  return (
    <div>
      <SortControls currentSort={sortBy} totalCount={orders.length} />
      <table>
        {/* table body unchanged */}
      </table>
    </div>
  );
}

import { Suspense } from 'react';
import { db } from '@/lib/db';
import { ProductCard } from './ProductCard';       // Server Component — zero JS
import { FilterBar } from './FilterBar';            // 'use client' — ships JS
import { AddToCartButton } from './AddToCartButton'; // 'use client' — ships JS

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: { category?: string; sort?: string };
}) {
  const products = await db.product.findMany({ /* ... */ });

  return (
    <div>
      <FilterBar />
      <div className="grid grid-cols-4 gap-4">
        {products.map((product) => (
          <div key={product.id}>
            <ProductCard product={product} />
            <AddToCartButton productId={product.id} price={product.price} />
          </div>
        ))}
      </div>
    </div>
  );
}

import { Suspense } from 'react';

// Each section is an independent Server Component with its own fetch
// Each Suspense boundary streams independently

export default function AnalyticsPage() {
  return (
    <div>
      <h1>Analytics</h1>

      {/* Shell renders instantly — skeletons show immediately */}
      <div className="grid grid-cols-2 gap-6">
        <Suspense fallback={<MetricSkeleton label="Revenue" />}>
          <RevenueMetrics />    {/* streams at ~120ms */}
        </Suspense>

        <Suspense fallback={<MetricSkeleton label="Users" />}>
          <UserMetrics />       {/* streams at ~200ms */}
        </Suspense>

        <Suspense fallback={<ChartSkeleton />}>
          <ConversionChart />   {/* streams at ~350ms */}
        </Suspense>

        <Suspense fallback={<TableSkeleton rows={5} />}>
          <TopProductsTable />  {/* streams at ~180ms */}
        </Suspense>
      </div>
    </div>
  );
}

// Skeleton components — render instantly, no layout shift
function MetricSkeleton({ label }: { label: string }) {
  return (
    <div className="border rounded-lg p-6 animate-pulse">
      <div className="text-sm text-gray-400 mb-2">{label}</div>
      <div className="h-8 bg-gray-200 rounded w-24" />
      <div className="h-4 bg-gray-200 rounded w-16 mt-2" />
    </div>
  );
}

function ChartSkeleton() {
  return <div className="h-64 bg-gray-200 rounded-lg animate-pulse" />;
}

function TableSkeleton({ rows }: { rows: number }) {
  return (
    <div className="space-y-2">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="h-10 bg-gray-200 rounded animate-pulse" />
      ))}
    </div>
  );
}