What are SPA and MPA in vue? What's the difference between the two?

This article will introduce to you the single page (SPA) and multi-page (MPA) of vue, and see the difference between SPA and MPA. I hope it will be helpful to you!

What is SPA

SPA Full name Single Page Application, that is, single page application. It is also generally called CSR (Client Side Render), which is client-side rendering. The resources it requires, such as HTML, CSS, and JS, are loaded in one request, that is, dynamically loaded without refreshing. Browser (Client) rendering, as the name implies, means that all page rendering, logic processing, page routing, and interface requests occur in the browser. For SPA, page switching is switching between components or views. [Related recommendations: "vue.js Tutorial"]

Simply put, the SPA application has only one html file, which can be accessed through vue-router in vue The technology of switching components locally instead of refreshing the entire page to achieve refresh-free switching of pages

SPA applications avoid interruptions caused by rendering the page on the server. This eliminates the biggest problem that the web development world usually faces in providing a seamless user experience.

Principle of SPA

js will sense changes in the url. Through this, js can be used to monitor changes in the hash value in the url, through the onhashchange event. Since the change of the hash value will not cause page refresh or jump, when the hash change is monitored, the component can be dynamically switched, and the page switching technology without refreshing can be realized.

• Note. Vue in vue-router does not support onhashchange events. It hopes that you use the hook function in vue-router to solve the problem.

Advantages of SPA

• 1. Fast page switching

Every time the page switches and jumps, there is no need to make a request for the html file, which saves a lot of http sending delay. We are switching pages. The speed is very fast.

• 2. Good user experience

Switching between page fragments is fast, including mobile devices, especially when the network environment is poor, because the components have been pre-loaded , does not need to send network requests, so the user experience is good

Disadvantages of SPA

• 1. The first screen loading speed is slow

Required on the first screen Request html once, and send a js request at the same time. After two requests come back, the first screen will be displayed. Compared with multi-page applications, the first screen time is slow.

• 2. Not easy for SEO

The SEO effect is poor because the search engine only recognizes the content in html and does not recognize js content, and the content of single-page applications 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 SPA applications. The web pages have poor rankings on Baidu and Google.

What is MPA

MPAMulti-page applicationMultiPage Application refers to an application with multiple independent pages (multiple html pages), each Each page must repeatedly load js, css and other related resources. Multi-page application jumps require a full page resource refresh. The biggest difference between

and SPA is that page routing switching is controlled by native browser document jump (navigating across documents). Page jumps return HTML.

Advantages of MPA

• 1. The first screen loads quickly

When we visit the page, The server returns a html, and the page will be displayed. This process only goes through one HTTP request, so the page display speed is very fast.

• 2. SEO effect is good

When search engines rank web pages, they must give weight to the web pages based on the content of the web pages to rank the web pages. Search engines can identify html content, and all the content of each of our pages is placed in html, so this kind of multi-page application has a good SEO ranking effect.

Disadvantages of MPA

• 1. Page switching is slow

Because each jump requires sending an HTTP request. If the network status is not good, When jumping back and forth between pages, obvious lags will occur, affecting the user experience.

• 2. Poor user experience

If the network is slow, the page will easily not load for a long time, and the user experience is very bad

Why should we use it? SPA application development

Through the above analysis, we can easily find that SPA and MPA have their own advantages and disadvantages, so why should we develop SPA? In fact, Vue also provides some other Technologies to solve these shortcomings, such as server-side rendering technology (SSR), can perfectly solve these shortcomings and solve these problems. In fact, single-page applications are a perfect page development solution for the front-end.

Comparison between SPA and MPA

• Comparative analysis of the two, as shown in the following table

The above is the detailed content of What are SPA and MPA in vue? What's the difference between the two?. For more information, please follow other related articles on the PHP Chinese website!