What is a SPA

SPA stands for Single Page Application. It is also commonly called CSR (Client Side Render). Resources such as HTML, CSS, and JS are loaded on a single request, i.e. dynamically loaded without refreshing. Client rendering as the name implies, all page rendering, logic processing, page routing, and interface requests take place in the browser. For A SPA, a page switch is a switch between components or views.

Simply put,SPA applications have only one HTML file, and in VUE you can switch components locally via vue-Router rather than refreshing the entire page, enabling the technique of switching pages without refreshing

The SPA application avoids the interruption caused by rendering pages on the server. This eliminates the biggest problem the Web development world typically faces in providing a seamless user experience.

The principle of SPA

Js can sense the change of URL, through which JS can monitor the change of hash value in URL. Through onhashchange event, since the change of hash value will not trigger page refresh or jump, when the change of hash is monitored, components can be dynamically switched, and page switching technology without refreshing can be realized

  • Note that vue does not support the onHashChange event in vue-Router and expects you to use the hook function in vue-Router

The advantages of the SPA

  • 1. Fast page switching

Every time the page switches, there is no need to do HTML file request, which saves a lot of HTTP delay, we switch pages quickly.

  • 2. Good user experience

Switching between page fragments is fast, including on mobile devices, especially in poor network environments, because components are pre-loaded and there is no need to send network requests, so the user experience is good

The disadvantage of the SPA

  • 1. The first screen loading speed is slow

The first screen requires an HTML request and a JS request, and only after two requests come back will the first screen be displayed. The first screen time is slow compared to multi-page apps.

  • 2. Not easy to SEO

SEO effect is poor, because search engines only know the content in HTML, not JS content, and the content of single-page application is generated by JS rendering, search engines do not recognize this part of the content, and will not give a good ranking, which will lead to the poor ranking of the web page made by SPA application on Baidu and Google.

What is the MPA

MPA MultiPage Application refers to an Application that has multiple independent pages (multiple HTML pages). Each page must repeatedly load related resources such as JS and CSS. When a multi-page application jumps, the whole page resource needs to be refreshed.

The biggest difference compared with SPA is that page routing switching is controlled by native browser documents. Page jump, which returns HTML.

The advantages of MPA

  • 1. Fast loading of the first screen

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.

  • 2. SEO effect is good

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.

The disadvantage of MPA

  • 1. Page switching is 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.

  • 2. Poor user experience

If the network is slow, the page is easy to load for half a day, the user experience is very bad

Why use SPA application development

Through the above analysis, it is not difficult to find that SPA and MPA have their own advantages and disadvantages, so why do we develop SPA? In fact,Vue also provides some other technologies to solve these disadvantages, such as server-side rendering technology (SSR), which can perfectly solve these disadvantages and solve these problems. In fact, a single page application is the perfect page development solution for the front end.

Contrast SPA and MPA

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