Modern web app architecture

Use when designing or reviewing the overall architecture of a modern web application across frontend, backend, rendering, and data boundaries.

Goal

• Choose architecture that matches the product’s actual needs for interactivity, content freshness, latency, team complexity, and operational cost.
• Favor explicit ownership boundaries so data, rendering, and mutations each have a clear home.
• Reduce accidental complexity before reaching for more infrastructure.

Rendering strategy

• Choose rendering per surface: static, SSR, streaming, client rendering, or mixed approaches based on the page’s needs.
• Prefer less client-side JavaScript for content-heavy or low-interaction pages.
• Do not standardize on one rendering mode for every route unless the product shape truly warrants it.

Server and client boundaries