This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

What is SPA?

SPA is the abbreviation of Single Page Application, meaning single page application, as a web application model.

To put it simply, ajax updates parts of the content on the same page instead of reloading the entire page to achieve a better use experience and save website resources.

An application with only one Web page is a rich client loaded from a Web server. When hopping to a single page, only partial resources are refreshed. Common resources (SUCH as JS and CSS) need to be loaded only once.

The principle of

Js is aware of url changes, which allows you to dynamically clear the content of the current page with JS, and then mount the content of the next page to the current page. At this time the routing is no longer back-end to do, but the front end to do, determine the page display corresponding components, clear unnecessary.


Page switching is fast.

Because we don’t need to deal with HTML file requests every time we switch pages, we save a lot of time on HTTP requests, so we switch pages quickly.


The first screen time is slightly slower and the SEO is poor.

The first screen of a single-page application takes a long time. The first screen requires an HTML request and a JS request. The first screen is displayed only when two requests come back. The first screen time is slow compared to multi-page apps.

SEO effect is poor, because search engines only know the content of HTML, do not know the content generated by JS rendering, search engines do not recognize, it will not give a good ranking, will lead to a single page application to make the web page in the search engine ranking is poor.

What is MPA?

MPA is the abbreviation of Multiple Page Application, which means multi-page application model. Compared with SPA, the biggest difference is that page route switching is controlled by navigating across Documents in native browsers.

Page jump, which returns HTML.


Faster first screen time for multi-page apps.

When we visit a page, the server returns an HTML and the page is displayed, with only one HTTP request, so the page is displayed very quickly.

Good search engine optimization results (SEO)

When search engines do web ranking, according to the content of the web page to give weight to the web page, to carry out the ranking of the web page. Search engines recognize HTML content, and we have all the content on each page in HTML, so this multi-page application of SEO ranking works well.


Switch to slow

Because each jump requires an HTTP request to be sent, if the network condition is not good, significant stutters can occur when jumping back and forth between pages, affecting the user experience.

The difference between SPA and MPA?

The comparative analysis of the two is shown in the following table

SinglePage Web Application (SPA) MultiPage Application (MPA)
composition A shell page and multiple page fragments Multiple complete pages constitute
Jump way A page fragment is deleted or hidden, and another page fragment is loaded and displayed. Simulated jumps between fragments without leaving the shell page A jump between pages is from one page to another
Resource sharing (CSS and JS) Shared, only need to load in the shell part No, each page needs to be loaded
Refresh the way Partial page refresh or change A full page refresh
Url patterns
The user experience Switching between page fragments is fast and the user experience is good, including on mobile devices Page switching loading is slow, the fluency is not enough, and the user experience is poor, especially on the mobile terminal
Animated transitions Easy to implement Unable to realize
Data transfer between pages Easy (parent-child component communication in Vuex or Vue) Relatively troublesome, rely on URL parameters, or cookie, localStorage, etc
Search Engine Optimization (SEO) It requires a separate scheme and is difficult to implement, which is not conducive to SEO retrieval using server-side rendering (SSR) optimization You can just do it
Scope of application High requirements of experience, the pursuit of smooth interface applications Ideal for applications that seek high search engine support
Development costs High, often need to use professional framework to reduce the difficulty of this mode of development Lower, but more page repetition code
Maintenance costs Relatively easy to Relatively complicated

Reference & Learning

  • SPA (single-page application) and MPA (multi-page application)
  • Front end: You need to understand single-page applications and multi-page applications
  • Comparison and optimization of SPA and MPA
  • Front end: SPA, CSR, MPA and SSR
  • About SPA/MPA with front and rear end rendering /SSR
  • Follow Xiao Ming to understand technical terms: MVC, SPA and SSR
  • Interviewer: What are your advantages and disadvantages of SPA single page? How to implement SPA application

If there are any mistakes in this article, please correct them in the comments section. If this article helped you or you liked it, please like it and follow it.