How Imports Work in RSC — overreacted
13 hours ago
- React Server Components extend the JavaScript module system to manage the client/server split using 'use client' and 'use server' directives.
- JavaScript modules are singletons—each module executes at most once, preventing code duplication and ensuring private state is retained.
- Sharing code between backend and frontend involves two independent module systems; reused code exists separately in each environment.
- Build failures from incompatible code (e.g., using 'fs' on the frontend) are beneficial as they force developers to resolve conflicts early.
- 'server-only' and 'client-only' poison pills act as markers that fail the build if the module is pulled into the wrong environment, propagating transitively.
- The 'use client' directive creates a door to the frontend, allowing backend code to refer to frontend modules without bringing them into the backend.
- The 'use server' directive creates a door to the backend, allowing frontend code to refer to backend modules without bringing them into the frontend.
- Together, these mechanisms let developers treat an RSC application as a single program spanning two computers with independent module systems and controlled data passing.