<h2>Summary</h2>
<p>Explicit tradeoffs: SSR vs CSR vs static vs island; monolith SPA vs micro-frontend; client vs server state; build time vs runtime config. No universal best — optimize for team size, SEO, interactivity, deploy independence, and p95 mobile hardware. Document decisions in ADR; revisit when constraints change.</p>
<hr />
<h2>Key points</h2>
<ul>
<li>Explicit tradeoffs: SSR vs CSR vs static vs island; monolith SPA vs micro-frontend; client vs server state; build time vs runtime config.</li>
<li>No universal best — optimize for team size, SEO, interactivity, deploy independence, and p95 mobile hardware.</li>
<li>Document decisions in ADR; revisit when constraints change.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/rendering-on-the-web">Rendering on the web</a></li>
<li><a href="https://web.dev/articles/performance-patterns-for-web-apps">Performance patterns</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-10-distributed-ui-consistency">Distributed UI consistency</a></li>
</ul>


Explicit tradeoffs: SSR vs CSR vs static vs island; monolith SPA vs micro-frontend; client vs server state; build time vs runtime config.

Frontend Architecture

Frontend system design trade-offs

Multiple tabs, devices, edge caches show same logical state — broadcast channel, `storage` event, WebSocket sync, SWR revalidation.