This is the 14th day of my participation in the genwen Challenge

Conceptual analysis:

Server Side Rendering (SSR)

  • Better first screen performance
  • Better for SEO, crawlers can grab rendered content directly

Client-side rendering

  • Front and back separation, page interaction

Isomorphism: The same set of code that both the server and client can run

  • The same set of code, reuse rate, maintainability enhancement
  • At the same time, it has the advantage of SSR and front and back end separation, which is conducive to SEO optimization
  • Better performance and better user experience

Architecture ideas and key points

React provides various apis for server rendering to quickly meet isomorphism requirements. The same code is executed once on the server and the client. After the first screen loads the page rendered by the server, the client then continues to execute and re-render the page, taking over the subsequent page interaction.

Isomorphic key point

It is said that the same code runs both the server and the client. In fact, the reusable components are basically components. The difference between the server and the client cannot be completely erased.

1. Different routes

Client:
Server:

2. Isomorphism of code

ReactDOMServer.renderToString(element); The official document: https://reactjs.org/docs/react-dom-server.html#rendertostring source code analysis:  https://github.com/facebook/react/blob/master/packages/react-dom/src/server/ReactDOMStringRenderer.jsCopy the code
ReactDOM. Render with ReactDOM. HydrateCopy the code

Conclusion:

  • How does dual-end routing work

See the code, both ends of the route separate maintenance

  • Data isomorphism

The data part uses Redux to communicate

  • Render isomorphism

The code part is isomorphic using React

SSR architecture diagram

The React isomorphism solution is briefly introduced and summarized. I hope it will be helpful to you.

Interested kids can try implementing a React isomorphic project Demo step by step from scratch.

References:

Imweb. IO/topic / 5 d2da… Tencent IMWEB team