web dev//rendering//MPA

2021-03-10

An MPA (multi-page application) is a web application in which every navigation loads a new HTML document from the server: a click on a link is a full request, and the browser throws away the old page and paints the new one. It is the original shape of the web (a PHP forum, a classic online shop, Wikipedia), and it is the counterpart of the SPA, where navigation swaps views inside one document that never reloads.

The distinction is about navigation, and it is often mixed up with where the HTML is built. An MPA is usually rendered on the server, page by page, but nothing forces that: a folder of static HTML files is an MPA built by SSG, and a server-rendered first load followed by client-side navigation is an SPA using SSR. Two questions, two axes: does navigation reload the document, and who builds the HTML.

What a reload buys is simplicity. Each URL is a real document, the back button and the history work by themselves, memory leaks die with the page, and every crawler can follow plain links from one page to the next.

What it costs is the reload itself. Each click repeats the request, reparses the page and reloads shared scripts and styles, which feels slower for app-like work (dashboards, editors) where an SPA keeps state between views.

The line has blurred. Modern MPAs prefetch pages on hover and animate transitions between documents, and frameworks such as Astro produce MPAs with interactive islands, so the choice is about where state lives across pages more than about speed.

MPA and SPA answer how navigation works; CSR, SSR and SSG answer where and when the HTML is made.

A sentence that pairs MPA with SSR as synonyms has merged the two axes.

The rendering axis is laid out in rendering, and the navigation alternative in SPA.