How “hydration” works with react server components?

Question

With SSR, JavaScript must be fetched for interactivity, which is often achieved via hydration. How will this be achieved with server components?

Answer 1

React server components don't have state, event handlers, etc. and cannot themselves be interactive. But they can be interleaved with client components, which can be interactive.

Also - React server components still require Javascript. Even for server components, even though no bundles are sent down, they are still "hydrated" in the sense that they are turned into JSX elements and then rendered onto the page as part of the React tree.

See https://blog.plasmic.app/posts/how-react-server-components-work/ for a complete look:

Why invent a whole new wire format? The goal on the client is to reconstruct the React element tree. It is much easier to accomplish this from this format than from html, where we’d have to parse the HTML to create the React elements. Note that the reconstruction of the React element tree is important, as this allows us to merge subsequent changes to the React tree with minimal commits to the DOM.