State shape
How to design client-side state shape — local vs global, colocation, derived state, and normalization tradeoffs.
topic 06
Frontend Architecture
State shape, data fetching, monorepo boundaries, build pipelines.
Data fetching: server vs client, waterfalls, RSC, and SWR cache
Where data fetching happens decides LCP. Server fetch collapses the critical path to one round-trip; client fetch after JS adds 2-4 sequential trips. Waterfalls are silent killers — Promise.all, RSC, and TanStack Query cache cure them.
- 1 Where data fetching happens — and why it decides LCP
- 2 Fetch waterfalls — diagnosis and the Promise.all cure
- 3 React Server Components and Suspense streaming
- 4 Client-side cache: TanStack Query, SWR, and stale-while-revalidate
- 5 LCP, prefetch, and race conditions in interactive fetching
- 6 Senior internals: RSC payload, caching layers, and production failure modes
- 7 Data fetching: multiple-choice review
- 8 Data fetching: free-recall review
- 9 Data fetching: code reading
- 10 Data fetching: collapse the critical path
Forms a11y
Accessible form patterns: semantic HTML, ARIA labels, focus management, error messaging, and keyboard navigation.
Tokens
Design tokens as the single source of truth for color, spacing, and typography across components and themes.
Monorepo
Monorepo tooling tradeoffs — Turborepo, Nx, and changesets — and when shared packages justify the overhead.
Code splitting
Route-level and component-level code splitting, lazy loading, and preload strategies that keep Time-to-Interactive low.
Build pipelines
Frontend build pipelines: bundler internals, tree shaking, module federation, and CI/CD integration.
Putting it together
Capstone: applying state, forms, tokens, monorepo, splitting, and build knowledge to a production frontend architecture.
You can see the whole topic now.
Every unit, from the underground to the orbit. Frontend Architecture is one constellation in the atlas — climb another topic and watch the next one light up.