What is front-end and back-end isomorphism?
In order to solve some problems (such as SEO, improve rendering speed, etc.) react provides 2 methods to generate a string in HTML text format on the server side. After getting this string in HTML format, it is usually assembled into a page and returned directly to the user's browser.
At this point, the work on the server side has been done, and then the work on the browser side.
After the browser gets the HTML text, it immediately renders the content to the user. Then load the .js file required for the page, then execute the JavaScript script, and then start to initialize the react component...
Here comes the problem. After react initializes the component, it will execute all the render() methods in the component, then generate the tree structure of the virtual DOM, and then write the virtual DOM to the real DOM of the browser when appropriate. Because react always generates real dom based on virtual dom, it will eventually replace all the HTML rendered on the server side.
The above thing is not a problem and it is not a problem. It is nothing more than that the user sees the page and "flashes" it. It is really a problem to say that it is a problem. The product will take this problem from the perspective of user experience and fight with you for half a month on various occasions. When you are tired, you simply turn off the server-side rendering, and then the operation is ready to start fighting with you with the SEO problem.
Engineers as smart as Facebook certainly thought of these issues, so they provided a checksum mechanism in the ReactDOMServer.renderToString(element) method .
There is not much introduction about the checksum official website , but various blogs at home and abroad have introduced a lot. I have been looking for the introduction of this mechanism by the react developers and have not found it....
Front-end and back-end isomorphism is to ensure that the DOM structure of the front-end and back-end is consistent, and no repeated rendering occurs. React uses the checksum mechanism for protection.
What is React above the fold rendering?
Simply put, it is the virtual DOM tree that React generates for the first time in browser memory. Remember it's the virtual dom, not the browser's dom .
Those who know react should know that all react components have a render() method (if the component is written in function mode, all the code in the function will be stuffed into the render() method). When the ReactDOM.render( element, container, [callback] ) method executes, the following steps are performed:
- All components will be initialized first (es6 executes the constructor).
- The render () method of all components will be called once, and a virtual dom tree will be obtained after this process is completed.
- React will convert the virtual dom to the browser dom, and call the componentDidMount() method of the component after completion to tell you that it has been mounted on the browser.
In the above process, after step 2 is completed , the first screen rendering of react is completed. Combined with the checksum mechanism, step 3 may not be executed.
When the state of the component changes (the setState() lifecycle function is called) or when the parent component renders (the render() method of the parent component is called), the render() method of the current component will be executed, which may cause virtual dom changes, but these changes have nothing to do with rendering above the fold.
React front-end and back-end isomorphic first screen rendering
After understanding isomorphism and first screen rendering, it is easy to understand how to solve the problem of non-repetitive rendering of the first screen.
First, after the server renders, there will be a checksum value written on the attribute of the root element:
This checksum is calculated based on the HTML content hash generated by the server.
Then after the browser loads all the js files, it starts to perform the three steps of initializing the rendering of ReactDOM.render( element, container, [callback] ) described earlier. After executing the second step to generate the virtual DOM, react will calculate a hash value based on the virtual DOM using the same algorithm. If it is consistent with the checksum , the server is considered to have completed the rendering, and the third step will not be executed.
If the checksum comparison is inconsistent, the following warning will be output in the browser console in the development environment and the test environment:
The production environment will not output any warnings.
The content of isomorphic rendering is so much, the principle is actually quite simple, nothing more than to ensure the consistency of the DOM. However, after combining the functions of code fragmentation, asynchronous loading, and asynchronous assembly of data by the server-side interface adjustment, it still takes a lot of effort to ensure that the DOM rendered by the server and the browser for the first time is consistent. But the principle is clear, things can always be done.