The difference between a single-page and a multi-page application is that in a multi-page application, clicking on a link loads a new page, whereas in a single-page application, links just rewrite some of the data on the same underlying webpage.
A multi-page application is made up of multiple HTML files; a single-page application uses a single HTML template that it fills in with changing data.
The Intuitive Difference Between MPAs and SPAs
On an intuitive level, the difference between single-page apps (SPAs) and multi-page ones (MPAs) is this: SPAs feel more like modern mobile apps; MPAs feel like old-fashioned websites. This makes sense, because SPAs are a modern invention. Historically, all websites were multi-page applications.
In particular, single-page applications (such as Pinterest) have a clean, simple design and linear user experience. Think: infinite scroll.
Multi-page applications (such as Amazon) tend to have a more complex and less linear structure. Clicking on a link will take you to a new page, which may look quite different than the homepage. Think: Web 1.0.
The Difference Under the Hood
That’s the gist of the difference from the user’s perspective. On the technical side, the difference between SPAs and MPAs is that a multi-page application executes most of its logic in the server, while a single-page application does this in the browser, via JavaScript APIs such as Fetch. In a multi-page application, more data moves between the server and the browser than in a single-page application.
In other words, SPAs use a single pre-downloaded template which is dynamically updated with data in response to user interaction. MPAs respond to user interaction by downloading new pages.
Fine-Grained Differences
The main difference between single-page and multi-page applications is whether pages need to be reloaded when navigating the site. Many smaller differences arise from this big difference.
Differences which Favor MPAs
- SPAs require more modern browsers than MPAs.
- SPAs also require JavaScript to be enabled.
- Less documentation is available for SPA development.
- SPAs have more SEO issues than MPAs. This is because traditional web crawlers don’t wait for more content to download after the first page load.
- Performance monitoring is harder for MPAs than for SPAs.
- The first download of an SPA can be slower than that of an MPA.
- SPAs can be vulnerable to cross-site scripting and so less secure than MPAs.
Differences which Favor SPAs
- Because they don’t require constant reloading, SPAs are generally faster than MPAs.
- MPAs often have a more complex and less linear structure than SPAs.
- Because they require less server use, SPAs can be cheaper.
- SPAs are easier to deploy than MPAs.
- Mobile development is easier for SPAs than MPAs.
- Frontend and backend development is more cleanly separated for SPAs than MPAs.
- Version control is easier for SPAs than MPAs.
Would you like to learn more?
