One Roundtrip Per Navigation — overreacted
13 hours ago
- Traditional HTML apps fetch all data in a single roundtrip by embedding data in the HTML itself.
- Client-side REST APIs often require multiple fetches per page, leading to client/server waterfalls and inefficiency.
- Colocating data fetching inside UI components (e.g., via `useEffect` or queries) worsens waterfall problems and makes optimization hard.
- Client loaders (e.g., React Router's `clientLoader`) reduce waterfalls but sacrifice colocation of data requirements with components.
- Server loaders (e.g., `getServerSideProps`) restore single-roundtrip efficiency and server-side optimization levers, but still lack colocation.
- Server Functions (e.g., TanStack or React Server Functions) enable colocation again but reintroduce client/server waterfalls.
- GraphQL Fragments achieve both colocation and single-roundtrip loading by composing data dependencies at build time.
- React Server Components (RSC) combine the efficiency of server loaders with colocation, ensuring one request per navigation and no client/server waterfalls.