SPAs and MPAs
Single Page App (SPA)
- The server, CDN, etc. serves you a blank page with a script that then populates the page on the client
- Generally have worse performance due to their reliance on the client and Javascript
- Uses client side navigation for quicker navigation 'app-like' behaviour
- Lets you persist state/etc across pages
- Allows for things like optimistic UI
- Allows for transitions
- Worse for SEO, unless you move into SSR
- Requires more tooling, setup, etc.
- Usually worse for accessibility: focus management, handling navigation, etc.
- Often doesn't work at all if Javascript doesn't load
Multi-Page App (MPA)
- Effectively just a website
- The server, CDN, etc. serves you HTML
- This server rendering means better performance
- Browser is responsible for navigation
- Trickier once you need client side interactivity, as you need to serve HTML but also then serve a 'new app' for JS, etc.
- More limiting - doesn't let you do some of the features you can with an SPA
Tools like [[nextjs]] and [[remix]] aim to give you the best of both worlds. The performance and resilience of a MPA, with the power of a SPA. Occasionally this is referred to as a 'transitional app'. There's a bit of a spectrum here though, tools fit on different parts of the scale. Some argue that the only 'real' transitional app is [[qwik]].
https://www.youtube.com/watch?v=860d8usGC0o
[[architecture]]
[[browsers]]
[[infrastructure]]
[[rendering]]
[[web]]