Design patterns and architecture · Where pages are made

SPAs vs MPAs-style app

Illustrative system design for a where pages are made app like SPAs vs MPAs: 3 topics to read, from requirements to deep dives.

Illustrative design, not SPAs vs MPAs’s actual implementation. Arrowbox is not affiliated with SPAs vs MPAs’s owner. Disclaimer

Core

How a page changes: MPA and SPA navigationBeginner · 30 min read · Sign in to read
A multi-page app lets the browser load a new document for every click; a single-page app intercepts the click, updates the URL itself and must rebuild what the browser used to do for free.
Where the HTML is made: CSR, SSR, SSG and streamingIntermediate · 33 min read · Sign in to read
The same page can be built in the browser, on the server for each request, or ahead of time at build. Each moves time between the server, the network and the user's device.
Hydration, islands and server componentsAdvanced · 38 min read · Sign in to read
Server-rendered HTML is only a picture until JavaScript hydrates it; islands and server components hydrate only the interactive parts so the rest ships no JavaScript.