React Server Components in Boilerplates

TL;DR React Server Components (RSC) are now the default in Next.js App Router and all modern boilerplates. They eliminate the need for API routes for data fetching, reduce client JavaScript, and simplify auth patterns. The catch: the mental model shift is significant, and mixing server/client components has sharp edges that trip up teams. What Server Components Actually Do In the old model (Pages Router), every React component runs on the client: // Pages Router — runs on client // Every user downloads this JavaScript // Every user runs this on their machine function Dashboard ({ userId }) { const [ data , setData ] = useState ( null ); useEffect (() => { fetch ( ' /api/dashboard ' ). then ( r => r . json ()). then ( setData ); }, []); return data ? < DashboardUI data = { data } /> : < Loading />; } In the App Router with Server Components: // App Router — runs on server // This code NEVER ships to the browser // The browser receives HTML and minimal JS for interactivity async function