Shulou(Shulou.com)06/02 Report--

This article is about how to understand SPA and MPA in vue. I think it is very practical, so I share it with you. I hope you can get something after reading this article.

What is SPA?

The full name of SPA is Single Page Application, that is, single-page application. Also known as CSR (Client Side Render), that is, client-side rendering. The resources it requires, such as HTML, CSS, and JS, are loaded in a single request, that is, dynamically loaded without refresh. Client rendering, as its name implies, means that all page rendering, logical processing, page routing, and interface requests occur in the browser. For SPA, a page switch is a switch between components or views.

To put it simply, SPA applications have only one html file. In vue, you can switch components locally through vue-router, instead of refreshing the whole page, to achieve the technology of switching pages without refresh.

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

The principle of SPA

Js can sense the change of url, through which you can use js to listen for the change of hash value in url. Through onhashchange event, because the change of hash value does not cause page refresh and jump, when you listen for hash change, you can dynamically switch components and realize the technology of switching pages without refresh.

Be careful。 Vue does not support onhashchange events in vue-router, it wants you to use the hook function in vue-router to solve the problem

Advantages of SPA

1. Page switching is fast

Every time the page is switched and redirected, there is no need to make a request for html files, which saves a lot of http sending delay, and we are very fast when switching pages.

two。 Good user experience

The switching between page fragments is fast, including mobile devices, especially when the network environment is poor, because the components are preloaded and there is no need to send network requests, so the user experience is good.

Shortcomings of SPA

1. The first screen loading speed is slow.

You need to request a html for the first screen and send a js request at the same time. The first screen will not be displayed until the two requests come back. Compared with multi-page applications, the first screen time is slow.

two。 Not easy to SEO

The effect of SEO is poor, because search engines only recognize the content in html, not js, while the content of single-page applications is generated by js rendering. Search engines do not recognize this part of the content, so they will not give a good ranking, which will lead to poor ranking of pages made by SPA applications on Baidu and Google.

What is MPA?

MPA multi-page application MultiPage Application refers to an application with multiple independent pages (multiple html pages). Each page must be loaded repeatedly with js, css and other related resources. Multi-page application redirection requires full-page resource refresh.

The biggest difference from SPA is that page routing is controlled by native browser document hopping (navigating across documents). The page jumps and returns HTML.

Advantages of MPA

1. Fast loading speed of the first screen

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

2.SEO has good effect.

When the search engine is doing the page ranking, it should give the page weight according to the content of the page to rank the page. Search engines can recognize html content, and we put all the content on each page in html, so this multi-page application SEO ranking works well.

Shortcomings of MPA

1. Slow page switching

Because each jump needs to send a HTTP request, if the network state is not good, when jumping back and forth between pages, there will be obvious stutters, affecting the user experience.

two。 Poor user experience

If the network is slow, the page can not be loaded for half a day, and 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 have to develop SPA? in fact, Vue also provides some other technologies to solve these shortcomings, such as server-side rendering technology (SSR), through these technologies can perfectly solve these shortcomings, solve these problems, in fact, single-page application for the front-end is a very perfect page development solution.

The above is how to understand SPA and MPA in vue. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.