What is the spa

Encyclopedia: Single Page Web Application (SPA), which is a single Web page application, is a Web application that loads a single HTML page and dynamically updates that page as the user interacts with the application.

A single-page page is an HTML page, which can be understood as that all other pages and units in an application are sub-components of a preset root page. Replacement and update of many sub-components are controlled through JS and CSS, so as to achieve the scene of simulating page hopping. I call it a SPA.

Evolution of front-end routing

Mention of front-end routing has to mention back-end routing, a back-end routing can be understood as a URL to initiate a request to obtain data (HTML template, text information, images, etc.) and then through the controller processing to render the page after processing to the browser, a new page will appear. This process is called SSR. Then the way the front end requests resources from the back end is back-end routing.

Disadvantages of back-end routing

But it’s clear that every time a page needs to be updated, a new request is made, which can put a lot of strain on the server and, if the network is bad, can lead to a very poor user experience. However, with the advent of Ajax, this interaction changed. Using the asynchronous loading mechanism of Ajax, you can send new requests without refreshing the page. To achieve SPA, improve user experience, reduce the pressure on the server.

The disadvantages of SPAs that do not take advantage of front-end routing

Everything has pros and cons, spa at that time also had its own disadvantages:

  • Spa cannot remember the user’s operation, and neither forward nor backward nor refresh can show the expected content of the user
  • Spa will have a variety of business pages, a URL, SEO is not friendly, is not conducive to search engines for inclusion

So the front-end road evolved to solve these two problems. The purpose of front-end routing:

  • When we change the URL, the browser does not make a request to the server
  • Listen for URL changes in real time

Implementation mechanism of front-end routing

  • Listen for hash changes in the URL
  • HTML 5 history pattern

hash

A hash value change does not cause the browser to send a request to the server, and a Hashchange event is triggered when the hash value changes. Hashchange captures changes in the URL to implement spa.

https://blog.csdn.net/JaxHu/#collection-list
Copy the code

For example, #collection-list is a hash value. Before the history mode of H5, front-end routing was implemented in hash mode.

history

The History route is based on the HTML5 specification, which provides history.pushState and history.replaceState for routing control. When you perform

History. PushState ({}, null, '/ home')Copy the code

The page URL will go from

 http://localhost:8080/ 
Copy the code

Jump to

  http://localhost:8080/home 
Copy the code

You can change the URL without refreshing the page.

PushState (pushState) pushState (pushState)

  • State: Stores JSON strings that can be used in popState events
  • Title: Most browsers now ignore this parameter and use NULL instead
  • Url: Any valid URL used to update the browser’s address bar

Hash vs. History

  • Hash is highly compatible, even with Internet Explorer of earlier versions

  • History is an H5-based implementation that is not necessarily compatible with older browsers

  • The hash pattern will embed the # symbol in the URL, which will look somewhat unnatural

  • This does not happen in History mode

conclusion

Specific implementation can go to see other big guy’s article, this article does not do in detail. In short, the purpose of front-end routing is to avoid page refresh and replace pages.