The React server render

Why

How to use

For a React application, if you want to directly return the complete HTML after entering or refreshing the page for the first time, you need to convert the components to be rendered on the current page to HTML on the server, react provides corresponding methods for this purpose.

Performance Optimization

For a large project, when we visit one of the pages, we only need to load the code of the current page, and then load the code of other pages. This can effectively reduce the size of js files that need to be loaded when accessing a page and improve the page response speed. To implement on-demand loading in a SPA application, you only need to use the dynamic import syntax. webpack supports this feature. Modules imported using the dynamic import syntax are packaged into a separate file.

  1. When the server renders a component, the component loaded on demand cannot be rendered into HTML.
  2. Even if the server can directly load the HTML of the component on demand, after the client takes over the asynchronous JS code, the intermediate state is displayed first (generally, the intermediate state is rendered and loaded first), in this way, the initial rendering results of the two ends are inconsistent.
  3. Now that server-side rendering is adopted, the HTML directly output during server-side rendering can finally contain the JS code that needs to be loaded asynchronously on the current page, that is, the script tag, without the need for dynamic creation by the client.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
hfpp2012

hfpp2012

Programmers who like to share front-end programming technical articles