History

Vanilla React (SPA)

Single Page Applications pass the work to the client. The original version of React worked by rendering and fetching data in the browser via Client Side Rendering. This resulted in many issues including problems with crawling for SEO and Google, a higher First Contentful Paint and affects UX and Performance.

Server Side Rendering (SSR)

Next.js released in 2016 and became the framework for React. It took the onus off of the client and passed some work to the server. Rendering the page on the server itself reduced paint times. This inherited the problem that existed with React as the page still needed the client side JavaScript bundle for interactivity, but it improved perceived performance and paint times.

This is where the idea of hydration really became thrust into the forefront. Here is a great explanation of hydration (opens in a new tab) by Josh Comeau (opens in a new tab)

It is important to remember that React is a library not a framework; it never included routing out of the box, everything was plug and play. An example of a framework would be Angular, which is a one size fits all framework, that includes everything you need out of the box.

SSR uses Node.js to render the page on the server using React and send a stream of HTML back to the client.

React Server Components (RSC)

As of Next.js version 13 and React version 18, the idea of React Server Components were introduced creating a new paradigm for creating applications that served to fix the above issues and add flexibity to developers.

There are now 2 types of components; server components (render on the server) and client components (rendered on the browser).

Server Components can be defined as any component that doesn't have any reference to user activity, like a button click, mouse press, or keyboard input. These components also do not use the useState or useEffect hook mentioned here .

Client Components serve to create the interactivity and simply can be seen as the original components that existed in React and also Next. They have access to any React hooks, they handle interactivity, and most importantly they rely on the JavaScript bundle that is sent on initial page load.

RSC were created to support a way to render and stream components to the browser therefore the browser only sends the JavaScript related to the client side components, which in theory will make it smaller, faster, easier to download, and cacheable. This is meant to fix the issues related to SSR. The bundle downloaded during the initial page load subsquently was used for every soft navigation that occurred after and meant more work was passed to the client.

As far as the browser is concerned React Server Components are pure HTML that do not wait for the browser to use JavaScript during hydration, therefore they are limited in function but also allow for a separation of concerns that wasn't available with SSR or CSR.