React server render the original solution

A. Use the React -dom/server to compile the React component into static HTML for rendering

Ref:reactjs.org/docs/react-…

B. Use the Next. Js server-side rendering library

Ref:nextjs.org/docs/gettin…

React Server Components are different from the original server rendering

The Server Component is not exactly server-side rendering

Take Next. Js as an example for server-side rendering:

  1. Export the site statically, with no JS code
  2. Perform partial static export according to the website page
  3. Complete server-side rendering tree
  4. Unpack components and dynamically introduce and render them on the client (similar to a React Module)
  5. Unpack components and dynamically import and render them on the server side (similar to a React Module)

Defect:

  1. A completely static export means that all pages are based on HTML documents, causing the entire render tree to be re-rendered every time the front-end page needs to be updated
  2. A partial static export means that only a single page is a static document. This means that only certain node nodes (such as 4,7) are not rendered on the server side and rendered as normal components in native js fashion. Therefore, the child components 8, 9, and 14 of 4 and 7 can only be rendered this way.
  3. Breaking components up and rendering them dynamically on the server side is the closest thing to the React Server Component. In this way, the component code is broken down into different bundles (chunks), rendered on the server side and then sent over the network to the client only when requested by the client.

React Server Component (RSC) :

Example: dynamic rendering on the server when the user enters the content using the search box and obtains the result a. When the user enters, the client will send a data request to the interface (normal FETCH request) b. C. Update the UI component using the React Server Component (RSC) after obtaining the data. A. When the user enters, the client sends a request to an INTERFACE that supports RSC rendering. The server will render the components to display itself and send a packet that is neither JSON nor static HTML to the client c. The client can parse the packet directly and render it as a static UI (not a React component). This saves the client time parsing the component.

3. Use SRC to pay attention to the problems

  1. Because the components rendered on the server side are chunks of UI updates, they cannot interact with the user.
  2. The solution to problem 1 is to reference the client-side component in the server-side component.
  3. The state of the server component is automatically synchronized with the state of the client component. It is not allowed to create or destroy components by itself. React controls components automatically.