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:

Single page application structure view

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:

Multi-page application structure view

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
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