What is the CSR

CSR stands for Client Side Rendering, which is client-side Rendering. As the name implies, rendering takes place on the client side (browser), not the server side. For example, we usually use vue, React and other framework development projects, first download HTML documents (not the final complete HTML), then download JS to perform rendering page results.

Take react as an example. The initial HTML rendered by the client is as follows

<! DOCTYPEhtml>
<html lang="en">
 <head> 
  <title data-react-helmet="true">react app</title> 
  <noscript> 
  </noscript>
 </head>
 <body>
  <noscript>
   You need to enable JavaScript to run this app.
  </noscript> 
  <div id="root"></div>
  <script type="text/javascript" src="/static/js/bundle.js" defer=""></script> 
  <script type="text/javascript" src="/static/js/main.chunk.js" defer=""></script> 
 </body>
</html>
Copy the code

there are no other elements on the page, then render by loading bundle.js, main.chunk.js. The entire rendering process includes DOM node generation, style injection, interactive event binding, data retrieval and so on.

Advantages and disadvantages of client-side rendering

advantages

  1. Front and rear ends separated. The front end focuses on interface development, while the back end focuses on API development, and the front end has more options. You can use the VUE and React frameworks instead of following back-end specific templates.
  2. The server is less stressed, rendering is done on the client side, and the server returns the raw HTML directly
  3. If the user has a good experience in follow-up visits (slow rendering of the first screen), the site can be made into SPA and incremental rendering can be performed

disadvantages

  1. Bad for SEO, because search engines do not perform JS-related operations to get the final rendered HTML.
  2. The rendering time of the first screen is relatively long, because the page needs to perform Ajax to obtain data to render the page. If there are many request interfaces, it is not conducive to the rendering of the first screen

What is the SSR

SSR stands for Server Side Rendering, which stands for server-side Rendering. Unlike client-side rendering, SSR output is a rendered HTML, the entire rendering process is carried out on the server side. For example, traditional JSP, PHP are server-side rendering

Pros and cons of server-side rendering

advantages

  1. SEO benefits, since the page is generated on the server, the search engine directly captures the final page results.
  2. Conducive to the first screen rendering, HTML required data are processed in the server, directly generate HTML, the first screen rendering time becomes shorter.

disadvantages

  1. Take up server resources and render all the work on the server side
  2. The user experience is not good. Every time you jump to a new page, you need to render the entire page on the re-server side, not just the mutable area

What is the SSG

SSG stands for Static Site Generation. The resulting page outputs HTML directly to disk at build time, and the HTML is returned directly to the client on each visit, equivalent to a static resource

Advantages and disadvantages of static site generation

advantages

  1. To reduce the pressure on the server, static resources (HTML) generated can be put on the CDN and cache can be rationally used
  2. SEO benefits, since HTML is already generated in advance, there is no need for server and client rendering

disadvantages

  1. This applies only to static data; for data that changes frequently, the page needs to be regenerated each time.
  2. The user experience is not good. Every time you open a new page, you have to re-render the entire page, not just the mutable areas

In addition to CSR, SSR, SSG, there are other rendering solutions, which are briefly introduced here

ISR: Incremental Site Rendering, Incremental website Rendering

  1. Key pages (such as website home page, hot data, etc.) are pre-rendered as static pages and cached to CDN to ensure the best access performance;

  2. Non-critical pages (such as old content with little traffic) respond to fallback content first, and then browser rendering (CSR) becomes the actual data; At the same time, the page is asynchronously pre-rendered and cached to THE CDN to improve the performance of subsequent user access.

Page updates follow the stale-while-revalidate logic, that is, always return CDN cache data (whether expired or not); If the data is out of date, asynchronous prerendering is triggered and the CDN’s cache is asynchronously updated.

Nextjs provides ISR solutions

Make all these Reactions – Demo

The disadvantage of the ISR

  1. For pages that are not pre-rendered, the first time the user visits a fallback page, the server does not start rendering the page until it is rendered. This leads to inconsistencies in user experience.
  2. For pages that have already been pre-rendered, the user loads directly from the CDN, but these pages may be expired, or even long expired, and only after the user refreshes once and visits a second time, can the new data be seen. This is unacceptable for scenarios such as e-commerce (for example, the item is sold out, but the user sees expired data indicating there is more).

DPR: Distributed Persistent Rendering

The operation mode of DPR is as follows

  1. Remove fallback behavior, instead respond directly to unrendered pages with on-demand Builder and cache the results to CDN;
  2. When the data page expires, it no longer responds to the expired cache page, but the CDN returns to the Builder and renders the latest data.
  3. CDN cache data is automatically cleared each time a new version is released.

The disadvantage of DPR

  1. Access to a new page may trigger on-demand Builder synchronous rendering, resulting in a long response time for the second request;
  2. It is difficult to defend against DoS attacks, because attackers may access a large number of new pages, causing the Builder to be run in large numbers in parallel, which requires the platform to implement Builder normalization and serial running.

Original statement

This article is original and unauthorized. It is prohibited to be reproduced by any media or personal we-media

Commercial infringement will be investigated, for authorization please contact [email protected]

The original link: www.1024nav.com/blog/front-…