React Server Components wire format, Suspense streaming boundaries, Server Actions, and CSP nonce propagation.
\text{LCP} \le 2.5\text{s}, \quad \text{INP} \le 200\text{ms}, \quad \text{CLS} \le 0.10
Evaluated at the 75th percentile (p75) of real-user field loads across mobile and desktop.
Server Components execute exclusively on the server and contribute **0 KB** to the client JavaScript bundle. Pass Server Components as `children` props into Client Components (the Donut Pattern) to avoid pulling server-only trees into the client bundle.
| Capability | Server Component (Default) | Client Component ('use client') |
|---|---|---|
| Direct DB / Secret / Filesystem Access | Yes (Safe) | No (Leaks to bundle) |
| Client Bundle Size Impact | 0 KB JS | Included in client chunks |
| React Hooks (useState, useEffect) | No | Yes |
| Browser APIs (window, EventSource) | No | Yes |
| Streaming via <Suspense> | Yes (Progressive HTML + Flight) | Renders fallback until chunk resolves |
// ClientSidebarShell.tsx ('use client')
export function ClientSidebarShell({ children }: { children: React.ReactNode }) {
const [open, setOpen] = useState(true);
return <aside data-open={open}>{children}</aside>;
}
// page.tsx (Server Component)
export default async function CoursePage() {
return (
<ClientSidebarShell>
<Suspense fallback={<CurriculumSkeleton />}>
<ServerCurriculumTree /> {/* Stays 100% on server! */}
</Suspense>
</ClientSidebarShell>
);
}No! Client Components are still pre-rendered to initial HTML on the server during SSR for fast First Contentful Paint, then hydrated on the client.