System Design

CSR vs. SSR vs. SSG vs. ISR vs. streaming SSR, the real trade-offs behind each, why hydration is expensive, resumability and islands as an alternative model, and how to actually choose.

1. 1CSR, SSR and SSG: The Real Trade-offs12 minClient-side, server-side and static rendering compared honestly: what each actually costs in TTFB, TTI, SEO and infrastructure, and why there is no universal winner.
2. 2Incremental Static Regeneration10 minISR as static generation's answer to its own weakness — stale-while-revalidate at the page level, and the trade-offs of trusting a background rebuild.
3. 3Streaming SSR and Suspense11 minWhy waiting for the slowest data on a page before sending any HTML is wasteful, and how streaming SSR with Suspense sends the fast parts first.
4. 4Hydration and Why It's Expensive11 minWhat hydration actually does after server-rendered HTML arrives, why it re-does real work the browser already painted, and how partial hydration reduces the cost.
5. 5Resumability, Islands, and Choosing a Rendering Strategy13 minIslands architecture and resumability as alternatives to full-page hydration, and a practical framework for picking a rendering strategy per route.

Local vs. lifted vs. global state, normalizing state shape, why server state and client state are different problems, optimistic updates, and state machines for complex flows.

1. 6Local, Lifted, and Global State10 minWhy state should default to the smallest scope that works, what lifting state actually costs, and why 'put everything in global state' fails as an app grows.
2. 7Normalizing State Shape11 minWhy nested, duplicated state causes real bugs at scale, and how normalizing into flat, ID-keyed structures — the client-side relational model — fixes it.
3. 8Server State vs. Client State12 minWhy data that lives on a server is a fundamentally different problem from UI state — caching, staleness and revalidation — and why treating them the same causes bugs.
4. 9Optimistic Updates and Rollback11 minUpdating the UI before the server confirms a mutation to hide network latency, and the rollback and conflict-handling design it obligates you to build.
5. 10State Machines for Complex UI12 minWhy a handful of booleans falls apart for multi-step flows, and how modeling explicit states and transitions rules out impossible combinations by construction.

The critical rendering path, code-splitting and bundle budgets, virtualization, memoization strategy and its real cost, and Core Web Vitals as the actual scoring rubric.

1. 11The Critical Rendering Path11 minWhat the browser must finish before the first pixel appears, why render-blocking resources exist, and the concrete techniques that shorten that path.
2. 12Code-Splitting and Bundle Budgets11 minWhy one giant bundle is the wrong default, how route- and component-level splitting trade upfront load for later waterfalls, and setting a real budget.
3. 13Virtualization for Large Lists10 minWhy rendering ten thousand DOM nodes for a ten-thousand-row list is the wrong default, and how windowing renders only what's actually visible.
4. 14Memoization Strategy and Its Costs11 minReact.memo, useMemo and useCallback actually explained as a trade of comparison cost for render cost — and why memoizing everything can make an app slower.
5. 15Core Web Vitals, Images, and Fonts12 minLCP, INP and CLS as the actual scoring rubric behind 'is this page fast,' and the concrete image and font loading strategies that move each metric.

Why and when to split a frontend into independently deployable pieces, module federation and composition models, and the well-organized monolith as the alternative that's often the right call.

1. 16Why and When to Split a Frontend12 minWhat actually justifies splitting a frontend into independently deployable micro-frontends, the real costs it introduces, and when a monolith is the right call instead.
2. 17Module Federation and Composition Models12 minHow independently-built micro-frontends actually get combined into one page — module federation conceptually, and the build-time versus run-time composition trade-off.
3. 18The Well-Organized Monolith as the Alternative11 minWhat actually makes a large frontend monolith painful, and how enforced module boundaries, ownership and fast CI deliver most of micro-frontends' benefit without the cost.

Building a component library that scales across teams, API design for shared components, versioning and breaking changes, and theming with design tokens.

1. 19Building a Component Library That Scales11 minWhy a shared component library is an internal product with real users, and the structural decisions — layering, ownership, documentation — that let it grow without collapsing.
2. 20API Design for Shared Components11 minDesigning a shared component's props like a public API — composition over configuration, controlled vs. uncontrolled state, and the specific cost of a boolean-flag explosion.
3. 21Versioning and Breaking Changes10 minHow a shared component library ships breaking changes without breaking every consumer at once — semantic versioning, deprecation windows, and codemods.
4. 22Theming and Design Tokens10 minDesign tokens as the layer that separates a design decision from where it's used, and how that separation is what makes theming, dark mode and rebrands tractable.

A repeatable framework for a design-X prompt, then three full worked scenarios — a social feed, an image-heavy PLP, and a real-time collaborative editor.

1. 23How to Approach a Frontend System Design Interview11 minA repeatable framework for an open-ended 'design X' prompt — clarifying requirements, naming trade-offs explicitly, and why saying 'it depends' correctly is a strength.
2. 24Worked Scenario: Design a Social Media Feed14 minA full worked answer to a classic interview prompt — rendering strategy, an infinite-scroll data model, virtualization, and optimistic interactions, with the trade-offs named.
3. 25Worked Scenario: Design an Image-Heavy E-Commerce PLP13 minA full worked answer for a product listing page: rendering strategy for SEO and freshness, image loading strategy against Core Web Vitals, and filter-driven state.
4. 26Worked Scenario: Design a Real-Time Collaborative Editor's Frontend14 minA full worked answer for a Google-Docs-style editor's frontend: the local-first optimistic model, conflict handling conceptually, and why this is a CSR problem.