Next.js Module Graphs: The Hidden Architecture Behind Server and Client Components

Most Next.js tutorials tell you: "Server Components run on the server, Client Components run on the client." That's true, but it hides a massive architectural detail that will confuse you the moment you try to share state between them. In this article, we'll build a small experiment, observe something that seems impossible, and then peel back the layers of the Next.js rendering pipeline to understand exactly what's happening. The Experiment Let's create a simple closure-based state module and share it between a Server Component and a Client Component. The Shared State Module // store/state.ts let funcInitializeCount = 0 ; export const stateCreator = () => { funcInitializeCount ++ ; console . log ( " stateCreator initialized " , funcInitializeCount ); let count = 0 ; const setCount = ( value : number ) => { console . log ( " setCount " , value ); count = value ; }; const increase = () => { count ++ ; }; const decrease = () => { count -- ; }; return { count : () => count , setCount , inc