Differences between server-side rendering and client-side rendering (advantages and disadvantages)

The difference between server-side rendering and client-side rendering

Server-side rendering ？
In the early days of the Internet , The browsers that users use are those that do not have complex logic 、 Simple pages , These pages are on the back end html Spliced , Then return to the front-end complete html file , The browser gets this html The file can be parsed and displayed directly , This is called server-side rendering .
Client rendering ？
As the complexity of front-end pages increases , The front end is more than just an ordinary page display , Maybe it's a component that adds more functionality , More complex , in addition , here ajax The rise of , Make the page begin to worship the development mode of front end and back end separation , That is, the back end does not provide complete html page , But to provide some api So that the front end can obtain json data , Then the front end gets json The data is then processed at the front end html Page splicing , Then show it on the browser , This is called client-side rendering
The most important difference between client-side rendering and server-side rendering is who does it html Complete splicing of documents
The advantages and disadvantages of server-side rendering are ？
advantage ：

1. The front end takes less time . Because the back end is spliced html, The browser just needs to render directly .
2. advantageous to SEO. Because there is a complete html page , So it's easier for reptiles to get information , Better for seo.
3. No need to occupy client resources . That is to say, the work of parsing template is completely left to the back end , The client only needs to parse the standard html page , This takes up less resources for the client , Especially the mobile end , It can also save more power .
4. Back end generates static files . That is, generate the cache fragment , This can reduce the time wasted in database query , And it's very efficient for pages with little data change .
   shortcoming ：
5. It's not conducive to the separation of front and rear ends , Low development efficiency .
   Use server-side rendering , There is no division of labor , For projects with high front-end complexity , It is not conducive to the efficient development of the project . in addition , If it's server-side rendering , The front end is usually written as a static html file , Then the back-end is modified to a template , It's very inefficient , And it often needs the front and back ends to complete the modification action together ; Or the front-end directly html Templates , And then hand it over to the back end . in addition , If the back end changes the template , The front end also needs to be adjusted according to the changed template css, This increases the time of front and rear end joint commissioning .
6. Occupy server-side resources .
   That is, server-side completion html Template resolution , If there are more requests , Will cause certain access pressure to the server . And if you use front-end rendering , It's to share the pressure of parsing with the front end , And here it's all over a server .
   The advantages and disadvantages of client-side rendering are ？
   advantage ：
7. Fore and aft end separation . The front end focuses on the front end UI, The back end focuses on api Development , And the front end has more selectivity , Instead of following the back-end specific template .
8. Experience better . such as , We make the website SPA Or part of it SPA, such , Especially the mobile end , Can make the experience closer to the original app.
   shortcoming ：
9. The front-end response is slow . If it's client rendering , The front end also needs to splice strings , It takes extra time , Not as fast as server-side rendering .
10. It's not good for SEO. At present, such as Baidu 、 Google crawler for SPA They don't recognize , Just recorded a page , therefore SEO Is very poor . Because the server may not save the complete html, But through the front end js Conduct dom The joining together of , So the crawler can't crawl information . Unless search engines seo Can be added to JavaScript Crawling capacity of , That's the guarantee seo.
    Whether to use server-side rendering or client-side rendering ？
    Regardless of the business scenario, blindly choosing which rendering method to use is playing hooligans . For example, enterprise websites , The main function is presentation without complex interaction , And need good SEO, Then we need to use server-side rendering ; And similar to the background management page , The interaction is relatively strong , Unwanted seo The consideration of , Then you can use client-side rendering .
    in addition , The specific rendering method used is not absolute , For example, some websites now use the first screen server-side rendering , That is, the server-side rendering is used for the page that the user first opens , This ensures the rendering speed , Other pages are rendered on the client side , This completes the separation of the front and rear ends .