Impossible Components — overreacted
13 hours ago
- React Server Components allow splitting a component into a backend part (data loading) and a frontend part (interactivity), enabling self-contained ‘impossible components’ that span both computers.
- Data flows from the backend (server) to the frontend (client) as props, preserving React’s top-down data flow and ensuring the backend is the source of truth.
- This pattern supports local state and local data isolation: each component instance manages its own data and state without coordination, enabling independent reuse.
- Props from the backend can be used later on the frontend for interactive behaviors (e.g., event handlers), not just initial HTML rendering.
- Beyond simple values, props can include arrays, objects, or JSX, allowing components like sortable or filterable lists to be composed from backend data and frontend logic.
- The ‘use client’ directive marks frontend components that rely on state or effects, while backend components use server-only APIs (filesystem, ORM, etc.).
- Composing backend and frontend parts into self-contained blocks (e.g., <PostPreview>) lets developers build interactive UIs in a single roundtrip, without extra requests.
- The division between frontend and backend is physical but composable tools enable a unified component model that matches how users perceive UI chunks (sections, cards, lists).
- Future possibilities include adding mutations via ‘use server’, dynamic per-request filtering, or loading placeholders directly from backend resources.