In both cases, the React Javascript code is executed by Node.js (or Deno, or whatever you are using). But they produce different things.
Server side rendering
Server-side rendering refers to React using ReactDom's ReactDom's renderToString() method and sending the HTML string to the client, which is different from sending static HTML Same for any server.
Then, typically via an SSR setup, React is re-run on the client side, running on the same rendered HTML and doing things like connecting click handlers and adding interactivity. This requires that the server and client have the same data to render. This is done by serializing the data on the server into tags on the client and an object representing the React state, and React is "hydrated" on the client with the same state. If the client has different data, it will produce a different DOM tree and overwrite what the server created, which defeats the purpose of SSR.
Using React on both server and client, the initial page load can be SSR, and then subsequent page loads can be client-side. For the initial page load, SSR is much faster than client-side rendering, which is even faster once all Javascript resources have been downloaded. Next.js enforces this strategy by default when you use SSR.
Server components
Server components are not rendered as HTML strings.
React "component" is a function or class that returns a React "element". A React "element" is an object representation of the tree to be rendered. In normal operating mode, ReactDOM takes these element objects and renders them to the DOM.
The server component will react elements back to the client. On the server, the component runs and generates elements, which are passed to the client (basically as JSON). These elements are then rendered on the client and placed into the DOM.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In both cases, the React Javascript code is executed by Node.js (or Deno, or whatever you are using). But they produce different things.
Server side rendering
Server-side rendering refers to React using ReactDom's ReactDom's renderToString() method and sending the HTML string to the client, which is different from sending static HTML Same for any server.
Then, typically via an SSR setup, React is re-run on the client side, running on the same rendered HTML and doing things like connecting click handlers and adding interactivity. This requires that the server and client have the same data to render. This is done by serializing the data on the server into
tags on the client and an object representing the React state, and React is "hydrated" on the client with the same state. If the client has different data, it will produce a different DOM tree and overwrite what the server created, which defeats the purpose of SSR.Using React on both server and client, the initial page load can be SSR, and then subsequent page loads can be client-side. For the initial page load, SSR is much faster than client-side rendering, which is even faster once all Javascript resources have been downloaded. Next.js enforces this strategy by default when you use SSR.
Server components
Server components are not rendered as HTML strings.
React "component" is a function or class that returns a React "element". A React "element" is an object representation of the tree to be rendered. In normal operating mode, ReactDOM takes these element objects and renders them to the DOM.
The server component will react elements back to the client. On the server, the component runs and generates elements, which are passed to the client (basically as JSON). These elements are then rendered on the client and placed into the DOM.