What is The Difference Between Server Side Rendering (SSR) and React Server Components?
December 22, 2020
In December 2020, the React team introduced an experimental feature called React Server Components. This may leave you wondering how exactly these “server components” differ from Server Side Rendering (SSR).
SSR Is All About the Initial Page Load
TL;DR: SSR is basically all about that initial load seeming more like a traditional server-rendered app.
React Server Components Are Always Rendered on the Server
React Server Components are always rendered on the server. These are likely components that are fetching some data from your backend, so it makes sense to have the rendering of these components colocated with the data that’s being fetched. Whenever these components need to be rerendered, they are refetched from the server and merged into the existing, client-side React component tree. What’s cool about this is client state is preserved even though we’re refetching parts of the view from the server.
React Server Components Are More Likely to Reduce Bundle Size
Since SSR apps are about the initial page load, the client is likely to end up downloading all your dependencies as they explore your application (after all, it’s a client side app after that first page load). However, if you have dependencies for a React Server Component, those dependencies will always be only on the server since those React Server Components are not shipped to the front-end until they have been rendered.
While React Server Components and SSR both involve some React rendering on the server, they’re actually quite different! RSCs are a very interesting development and I certainly look forward to learning more about them.
If you'd like to support this blog by buying me a coffee I'd really appreciate it!
Nick Scialli is a senior UI engineer at Microsoft.