One, what is rendering
-Rendering: data + template stitched together
2. Traditional server-side rendering
-Early web page rendering was done on the server
-The front-end and back-end codes are completely coupled together, which is not conducive to development and maintenance
-There is not enough space on the front end
-High pressure on the server
-General user experience
Three, client rendering
-The backend is mainly responsible for processing the data interface
-The front end is responsible for rendering interface data to the page
-The front end is more independent and is no longer restricted by the back end
There are also deficiencies:
-First screen rendering is slow
-Not good for SEO (search engine)
Four, front-end framework based on client-side rendering
- Angular / Vue / React
-Advantages: good user experience, high development efficiency, good rendering performance, good maintainability, etc.
-Disadvantages: long first screen rendering time, not conducive to SEO
Solve the shortcomings: learn from traditional server-side rendering
Five, isomorphic applications
-Rendering the first screen straight out through the server side, solving the problem of slow first screen rendering of SPA applications and not conducive to SEO
-Take over page content interaction through client-side rendering to get a better user experience
-This method is usually called modern server-side rendering, also called isomorphic rendering.
-Applications built in this way are called server-side rendering applications or isomorphic applications.
Six, how to achieve isomorphic rendering
-Official solutions using frameworks such as Vue and React
-Advantages: help to understand the principle
-Disadvantages: Need to build an environment, which is more troublesome
-Use third-party solutions
-Nuxt.js of Vue Ecosystem
-Next.js of React Ecosystem
Seven, the problem of isomorphic rendering applications
-Limited development conditions
-Browser-specific code can only be used in certain lifecycle hook functions.
-Some external extension libraries may require special processing to run in server-side rendering applications.
-You cannot manipulate the DOM during server-side rendering.
-Certain code operations need to distinguish the operating environment.
-More requirements involving build setup and deployment
-Need to build server and client
-Can only be deployed on Node.js Server
-More server load
-Rendering a complete application in Node requires a lot of CPU resources compared to a server that only provides static files.
-If the application is used in a high-traffic environment, the corresponding server load needs to be prepared.
-Need more server-side rendering optimization work processing.