React Server vs Client Components

For someone new to the server components, the mental model is the component that is rendered on the server is called a server component.

And, the component that is rendered on the browser is called a client component.

Is this understanding correct?

The answer is partially correct and partially wrong.

Server components only run on the server once during the page load.

Client components are called "Client" because they contain browser-specific code, such as hooks, browser APIs, etc.

However, this does not stop client components from running on the server. On the server, the client components only render the server-specific code.

Both the server and client components generate a non-interactive HTML on the server.

This server-generated HTML is served to the browser along with the embedded scripts. This script only has client-specific code, no server components.

This script is used on the browser for the hydration, which runs all the client components again and adds interactivity to the page.

Therefore, Client components are not only client-side rendered components.

This is a very high-level explanation of the React Server and Client components.

I'll go into more depth in my upcoming articles about the Server and Client components. I'll also attach code samples to verify this behavior.