One thing that really excites me in the browser world right now is the renewed focus on multi-page applications (MPAs).
For a long time, single-page applications (SPAs) felt like the only viable way to achieve certain features and performance characteristics. If you wanted fast navigation or polished page transitions, an SPA was basically the defaultonly choice.
Some of the classic advantages of SPAs included:
- fast page loading after the initial load
- smooth page transitions and navigation effects
But the interesting thing is that these features are no longer exclusive to SPAs.
New browser features are leveling the playing field
Compression
Soon, browsers will be able to use super smart compression based on pages you’ve already loaded. Instead of re-downloading large chunks of repeated HTML (headers, navigation, layout, etc.), servers can send much smaller diffs.
If you want to dig deeper into this, check out:
- Compression Dictionary Transport – HTTP | MDN
- The Ultimate Guide to Shared Compression Dictionaries | DebugBear
This directly chips away at one of the historical weaknesses of MPAs: having to reload the entire document on every navigation.
Native prefetching and prerendering
Another area where SPAs used to dominate was preloading.
Previously, only SPAs could easily preload the next page using JavaScript. For example, on link hover you might start loading the next page’s data, then instantly render it on click and refresh it in the background.
Now, browsers offer a native alternative via the Speculation Rules API | MDN.
Instead of custom JavaScript logic, you can declaratively tell the browser what kinds of pages should be prefetched or prerendered:
<script type="speculationrules">
{
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
{ "not": { "selector_matches": ".no-prerender" } },
{ "not": { "selector_matches": "[rel~=nofollow]" } }
]
}
}
],
"prefetch": [
{
"urls": ["next.html", "next2.html"],
"requires": ["anonymous-client-ip-when-cross-origin"],
"referrer_policy": "no-referrer"
}
]
}
</script>This gives MPAs many of the same preloading capabilities that previously required an SPA and a client-side router.
Page transitions
Finally, although I think page transitions can be a gimmick, for a long time smooth transitions were another feature that only an SPA could provide.
That’s changing with the introduction of View Transitions. With cross document view transitions, MPAs can now animate between full page navigations in a way that previously required client-side rendering.