NEXT
Push 'use client' to leaf components and pass server data down as props
app/dashboard/page.tsx
tsx// Server Component (default) — fetches, ships zero JS
export default async function Dashboard() {
const data = await db.analytics.getMetrics()
return <Chart data={data} /> // Chart is the only 'use client'
}
// Chart.tsx
'use client'
export function Chart({ data }: { data: Metrics }) { /* interactive */ }Everything in the App Router is a Server Component until you add `'use client'`, and that directive taints the whole subtree — it all ships to the browser. Keep interactivity at the leaves: fetch and compose on the server, and mark only the small components that need state, effects, or browser APIs as client. Passing server data down as props keeps the JS bundle small and the data-access logic on the server where secrets stay safe.
nextjs15server-componentsarchitecturebundle-size