Server Rendering explained the model: some components run only on the server, never ship their code to the browser, and hand down a serialized element tree with holes where interactive components go. Next.js 10,514 is where that model stops being a diagram. The App Router compiles two module graphs out of your app/ folder, decides which of your files belongs to which, and fails the build when you mix them up.
This section is about the seam: where a console.log comes out, what the payload in the HTML contains, the errors every App Router developer meets in their first week, and what happens — in kilobytes off disk — when one component moves across the boundary. Every listing, log and number below came from a Next.js 16.3.5 project built with React 19.3.0 7,897 . The rule has two halves, stated precisely in the Next.js documentation: code crosses the boundary through imports, and data crosses it through props.