I’ve just watched the React team video about Server React Components.
Now of coure I have massive respect and admiration for the whole React team. I think React is fantastic.
But I’m a bit puzzled about Server Side React Components.
The benefits are:
Server components can access the database on the server, removing latency of database calls from the client to the server
Server components can use dependencies that never get uploaded to the client, saving page weight
Isn’t this just what all web sites used to have before Client-Side Rendering was introduced? Everything was rendered on the server. There was no CSR. The benefit of CSR was you only had to send data over the wire to the client - not heavy DOM elements.
The example in the video does not appear to present a compelling use case in which Server Components would be needed.
And you still have potential latency waiting for the server to send back the rendered DOM elements to the client – which they dramatize in the video.
Plus you get the substantial mental and context-switching overhead about having to think in terms of Server Side vs Client Side vs. Any Side React components.
What are some use cases where Server Side Components could be worth implementing?
The main difference is that it can send per component. Unlike PHP or SSR that renders the entire HTML from server before sending the complete HTML to the client.
SSR + RSC can help SEO a lot because of
fast loading (SSR)
small bundle (RSC)
Imagine lazy loaded components or components loaded on view
You are most likely lazy loading the jsx file which will then render the component. But you still send all the jsx files to render the entire page you are initially loading. What you are lazy loading are the next pages (not per component).
In RSC, you never send the jsx files of those components. Come to think of it, there should be no need to lazy load these components as there is no need to hydrate them. You just need to display them and if there is SSR, it is already there at the start.
You still need to send the jsx files of non-RSC components that you need for the page. To make it clear, a page is composed of components. Those components can be a mix of RSC and regular components.
What are candidates for RSC?
Those components that are render only, no state changes.