Last week, the React team released a new feature called React Server Components (RSC). In this article, I would like to give you my perspective on a few aspects of RSC.
Can’t I run React on servers already?
Yes you can. React has supported server-side rendering for a long time using the react-dom/server package, which is a react renderer for static HTML from React components.
However, notice that react-dom/server has a simple job: it takes the React tree, and converts it into a static HTML markup.
You have to rehydrate the state (using ReactDOM.hydrate), add any interactivity using client side JavaScript, and take care of navigation, caching, and a million other things yourself.
Frameworks like Next.js do a lot of the heavy lifting for you already, but that’s for another day.
So how do React Server Components differ from Server-Side Rendering?
Server components are not a full SSR. Think of a React website as a hierarchy of components like the following:
Let’s use Next.js as an example for SSR as it is the most common SSR framework for React. Next.js (SSR) gives you the ability to do the following:
- Complete static export of site with no JS
- Partial static export per page (experimental Next.js feature)
- Complete SSR of the tree (and then rehydrating it, and so on)
- Splitting components using dynamic import rendered on client as a React module.
- Splitting components using dynamic import rendered on server as a React module.
#react #reactjs #javascript #web-development #developer
