First of all, tell us about the difference between SPA, SEO, SSR three
- SPA (SINGLE Page file application) single-page applications, a solution is proposed before and after the end of the separation.
Pros: Fast switching between pages; reducing the pressure on the server;
disadvantages: the fold open slow, is not conducive to SEO search engine optimization. - SEO (Search Engine Optimization) SEO, search engines use the rules of natural increase website ranking in the relevant search engines.
Before we say SPA single-page application, access to data through ajax, which can be difficult to guarantee our page search engine receives. And there are some search engines do not support js and ajax data acquisition, it is not to mention SEO, and to solve this problem, SSR debut ??? - SSR (Server Side Rendering) server-side rendering, to some extent SSR appears to solve the problem of slow SPA fold, but also greatly reduces the adverse impact on ordinary SPA of SEO.
Advantages:
faster response time, without waiting for all js are downloaded, the browser will be able to show a more complete page;
better SSR, we can SEO critical information directly in the background on rendered html, so as to ensure search engines You can crawling key data.
Disadvantages:
take up more CUP and memory resources;
some common browser api may not work, such as window, document, alert, etc., if used, needs to be judged on the operating environment.
What is a server-side and client-side rendering rendering?
Early Internet users use the browser to browse are some of the complex is not logical, simple pages that are in the backend html spliced, and then return to complete front-end html file, the browser get this html after the file can be directly demonstrated resolve, which is the so-called server-side rendering. With the increased complexity of the front page, not just the front page shows the ordinary, possibly add more functionality components, greater complexity, this time ajax rise, making the page began to worship the front and rear end isolated development model, that is, the rear end does not provide a complete html page, but to provide some of the splice further api html page at the front so that the front end can get json data, and then after the front end to get json data, and then displayed on the browser, this is called a client rendering, so you can focus on front-end UI development, with a focus on back-end logic development.
Essential difference between the two?
The most important difference between the client and server side rendering is rendered exactly who is going to complete the full mosaic html file, if it is done on the server side, and then returned to the client is the server-side rendering, if a front-end to do more much work completed mosaic html, then the client is rendering.
Server-side rendering strengths and weaknesses?
advantage:
- The front is less time consuming. Because the back-end splicing finished html, browser only needs directly rendered.
- Conducive to SEO. Because the back end of a complete html page, so crawling reptiles easier access to information, more conducive to seo.
- Without taking up client resources. That is entirely up to the job of parsing the template backend to do, as long as the client can parse standard html page, so take up less resources for clients, especially mobile terminal can also be more energy-efficient.
- Backend generates static files. That generates cache clip, so that you can reduce database query time wasted, and little change in the data page is very efficient.
Disadvantages:
- Before and after the end of the separation is not conducive to development of low efficiency. Using server-side rendering, you can not be a division of labor, the high front-end for complex projects, the project is not conducive to efficient development. In addition, if a server-side rendering, the front-end general is to write a static html file, and then modify the back-end as a template, this is very inefficient, and often need to work together to complete the act of modifying the front and rear end; the front is done directly or html template, and then handed over to the back-end. Further, if the rear end of the template changed, also we need to readjust the distal css changes based on the template, such that the front and rear ends of the FBI time increases.
- Take up server resources. That server side parsing html template, if more requests, the server will cause some pressure access. If using a front-end rendering, it is to resolve these pressures sharing the front end, and here indeed entirely to a server.
The client rendering strengths and weaknesses?
advantage:
- Separate front and rear ends. Focus on the front end of the front end UI, api focused on the development of back-end and front-end have more selective, without the need to follow a specific back-end templates.
- Experience better. For example, we will make the site or parts of SPA SPA made, so, especially for the mobile side, you can make the experience closer to the native app.
Disadvantages:
- Distal slow response. If the client is rendering, but also for the front end of string concatenation process takes extra time, faster is better to server-side rendering speed.
- It is not conducive to SEO. At present, such as Baidu, Google's crawlers for the SPA is not recognized, just record a page, so SEO is poor. Because the server may not be preserved html, but the front end by splicing dom js, then the crawler can not crawl information. Unless a search engine seo can increase the ability to crawl JavaScript, which is to ensure seo.
Using server-side or client-side rendering rendering?
Business Scene talk about blindly choose which rendering mode to use bullying. Such as enterprise-level Web site, the main function is to demonstrate without complex interactions, and the need for good SEO, then we need to use the server-side rendering; and similar admin page, interactive strong, do not need to consider seo, then you can use client-side rendering.
In addition, what specific rendering method to use is not absolute, such as some sites are now using server-side rendering first screen, that is, for most users begin to open that page using a server-side rendering, thus ensuring the rendering speed, while the other the page uses client rendering, thus completing the front and rear ends of the splitter.