Server Components & Boundaries
React Server Components fundamentally separate build-time or per-request server compute from the client-side JavaScript bundle shipped over the wire.Demystify what "use client" actually signifies: a boundary declaring where client hydration begins, not a directive to skip server prerendering.Explore the React Flight protocol wire format, inversion-of-control slot composition, and state management architectures using URL parameters and client stores.
The "use client" Boundary: What Crosses the Wire?
The "use client" directive marks an entry point to the client bundle boundary, not code that executes exclusively in the browser. Client components still pre-render to HTML on the server during SSR. All props passed from Server Components to Client Components must be serializable (JSON-like), prohibiting functions, classes, and Symbol keys.
Passing Server Components to Client Components as Children
A Client Component cannot directly import a Server Component, but can accept it as a children or slot prop. The Server Component executes on the server, serializes its virtual DOM output, and passes the rendered React elements into the Client Component, preventing client boundary contagion.
The React Flight Protocol & RSC Wire Format
The React Flight protocol is a compact, streaming text format used to serialize React Server Component trees over the wire. Instead of sending HTML or raw JavaScript, the server streams a chunked JSON-like stream containing module references for Client Components ($L), serialized props, and virtual DOM tags, enabling seamless client-side tree reconciliation without document reloads.
Third-Party Library Integration & Client Wrappers
Many npm packages rely on React hooks (useState, useEffect) or browser globals without declaring "use client". To safely use them in Server Components, developers create a thin wrapper component marked with "use client" that re-exports the library component, establishing an explicit boundary.
State Management & Context Architecture in RSC
In an RSC-first architecture, server state is managed through the URL and Server Components, eliminating redundant global stores. React Context and client stores (Zustand, Redux) are restricted to Client Components for interactive UI state, initialized with server data via props or provider wrappers without hydration mismatches.