SinglePage Web Application (SPA)
An application with only one Web page is a rich client loaded from a Web server. After jumping to a single page, only local resources are refreshed. Public resources (such as JS and CSS) need to be loaded only once
As shown in figure:
MultiPage Application (MPA)
Multi-page jump Refreshes all resources. Each common resource (such as JS and CSS) needs to be selectively reloaded. This function is used for apps or clients
As shown in figure:
Specific comparative analysis:
| SinglePage Web Application (SPA) | MultiPage Application (MPA) | |
|---|---|---|
| composition | A shell page and multiple page fragments | Multiple complete page composition |
| Resource sharing (CSS, JS) | Shared, just load in the shell part | Not shared, every page needs to be loaded |
| Refresh the way | The page is partially refreshed or changed | A full page refresh |
| Url patterns | a.com/#/pageone a.com/#/pagetwo |
a.com/pageone.html a.com/pagetwo.html |
| The user experience | Fast switching between page segments and good user experience | Page switching loading is slow, fluency is not enough, and the user experience is poor |
| Animated transitions | Easy to implement | Unable to realize |
| The data transfer | easy | Depend on url pass parameter, or cookie, localStorage, etc |
| Search Engine Optimization (SEO) | It requires a separate scheme, is difficult to achieve, and is not conducive to SEO retrieval can be optimized using server side rendering (SSR) | Simple implementation method |
| The trial scope | High requirements of experience, the pursuit of smooth interface applications | Suitable for applications seeking a high degree of search engine support |
| Development costs | Taller, often with the help of a professional frame | Low, but pages repeat more code |
| Maintenance costs | Relatively easy to | Relatively complicated |