Spa single page application

1. Definition of single page application

1. What is a single page

A single page does not mean that a web page has only one page , It means that this web page can have 1 To multiple different pages , But its entry file only index.html This one , Other pages are through js Control route jump to realize page Jump

2. Contrast with traditional multi page mode

• As can be seen from the figure above , Traditional multi page mode application , Every time the interface is refreshed, it will be re requested by the server html file , Early Web Application , The role of the front end is weak , Business logic and data processing are on the back end , The back end returns a HTML page , The front end is only responsible for displaying . In this mode , Single HTML The page is treated as a functional original , Form submission , Hyperlink jump can be used to re request new HTML page , So as to show users a new page . In this way , You can feel that the page is always refreshing , A click may take a long time , This is because , When the page changes , All resources need to be re requested . These problems lead to poor user experience , And wasted resources .
• If you use single page mode , First completion html After file request , Later, send the request like the background again , The background returns only updated data data , It can dynamically rewrite the current page to interact with users , Instead of reloading the entire page . The fluency of single page applications makes Web Applications are more like desktop or Native Applied . Compared with the traditional Web application , Single page application achieves the separation of front and back ends , The back end is only responsible for processing data and providing interfaces , Page logic and page rendering are left to the front end . The front end is now , Single page applications have been widely used , Current React、Vue、Angular And so on SPA principle . Single page application means that the front end has the initiative , It also makes the front-end code more complex and huge , modularization 、 Componentization and architecture design are becoming more and more important

2. How to realize single page

1. location.hash

We can monitor # The change after the sign （hashChange）, To dynamically change the content of the page .URL Of # The address after the number is called hash, This is what we call Hash Pattern , It's a very typical front-end routing method .

2. window.history

This way is used History API,History API As the name suggests, it's for historical records API , The principle of this mode is to save the state of the page to an object first （state） in , When the page of URL When changing, find the corresponding object , To restore this page . In fact, this function was originally designed to facilitate the browser to move forward and backward , Using this pattern , You can get rid of # Implement front-end routing with .

Vue Two modes of front-end routing have been provided for us , We don't have to do it ourselves .

3. SPA Advantages and disadvantages

The advantages are ：

• No refresh experience , Users will not be frequently “ interrupt ”, Because the interface framework is local , The response to users is very timely , Therefore, the user experience is improved ;

• Separate front and rear concerns , The front end is responsible for interface display , The back end is responsible for data storage and computing , Attend to each one's own duties , Don't mix the front and back logic ;

• Reduce server pressure , The server can only use data , Regardless of presentation logic and page composition , Throughput will increase several times ;

• API share , The same set of back-end program code , Can be used without modification Web Interface 、 mobile phone 、 Tablet and other clients ;

• Full front-end componentization , Front end development is no longer page based , Use more of the idea of componentization , Code structure and organization are more standardized , Easy to modify and adjust .

Disadvantages are ：

• Yes SEO Not very good , Multi page application is right SEO Amicable , Because what is returned to the front end is the rendered HTML structure , The content inside can be captured by crawlers , Though it can be done by Prerender Pre rendering optimization and other technologies solve part of , But it is relatively difficult to index it ;

• Error prone , Need to use program management to move forward 、 back off 、 Address bar and other information ;

• High front-end development threshold , High demand for technical ability , You need to have a certain understanding of design patterns , Because facing is not a simple page , It's a desktop software running in a browser environment .

Reference link