CSR client rendering

  1. Request HTML page — white screen
  2. Request JS resources, perform JS code rendering — visual (loading state)+ interactive
  3. Request API interface – completely visual

pros

  • The server responds fast (because it returns a blank page)
  • The deployment of simple
  • The only render that supports a single page application (SPA allows for less jump awareness and no full page refresh)

cons

  • White home page
  • The JS resource package is large in size
  • Website traffic quality statistics will be more troublesome
  • Not friendly to search engines

SSR server rendering

  1. Request the HTML page, request the API interface on the server, render and return — visual
  2. Request THE JS resource, execute the JS code to render again (isomorphic) — interactive
  3. Requests without API interfaces are completed in the first step of server rendering

SSR: The generated content is dynamic and can be rendered for different users, but there is no direct access to the browser API. The homepage of digging gold using the scene login mode updates quickly. It is necessary to request API interface according to user information, and then complete rendering

SSR is not without client rendering, but after the first screen is rendered by the server, then the client renders

pros

  • Page visible immediately
  • The client does not need to make an API request
  • Friendly to SEO

cons

  • The server processes slowly
  • UI framework compatibility issues

Static Site Generation (SSG) Static page generation

  1. Pre-static during the build phase, visual HTML pages are generated
  2. Request HTML page – visual
  3. Request THE JS resource, execute the JS code to render again (isomorphic) — interactive
  4. Requests without API interfaces are completed in the first step of server rendering

SSG is different from SSR. SSG completes the rendering in the build stage of the front-end resource, and the dynamic data and paths are executed in the getStaticPaths and getStaticProps methods. SSR renders after the request is initiated

SSG: Generated content is dynamic, but not directly accessible to the browser API(there are no Windows in Node) and not relevant to the user. The usage scenario can be multiple blog posts – routing is dynamic and does not update too quickly, and all users will see the same posts depending on the content of the blog

pros

  • Page visible immediately
  • The client does not need to make an API request
  • Friendly to SEO
  • Server processing is fast

cons

  • Any changes to the data require repackaging of the release front-end resources
  • UI Framework Compatibility