What is the difference between React Server Components (RSC) and Server Side Rendering (SSR)?

So with React 18 came RSC. I'd like to how is it different from SSR we have in NextJS.

In both cases, React Javascript code is executed by Node.js (or Deno, or whatever you're using). But they generate different things.

SSR

Server-side rendering is when React renders components to a string of HTML using ReactDom's renderToString() method, and sends that HTML string to the client, the same as any server sending static HTML.

Then, usually with SSR setups, React re-runs on the client side, running over the same rendered HTML, and does things like wire up click handlers and add interactivity. This requires that the server and the client have the same data to render. This is done by serializing the data on the server into a <script> tag on the client with the object representing the React state, and React "hydrates" on the client with that same state. If the client has different data, it will produce a different DOM tree, and overwrite what the server created, which defeats the purpose of SSR.

With React on both the server and client, the initial page load can be SSR, and then subsequent page loads can be client side. SSR is much faster than client side rendering for initial page loads, and then client side is faster once all the Javascript resources are downloaded. This strategy is what Next.js does by default when you use SSR.

Server Components

Server components don't render to an HTML string.

A React "component" is a function or a class that returns React "elements." A React "element" is the object representation of the tree to render. In normal operation mode, ReactDOM takes these element objects and renders them to the DOM.

Server components return react elements to the client side. On the server, the components run, and generate elements, which are passed to the client (basically as JSON). These elements are then rendered on the client and put into the DOM.

React Server Components are a new type of component that can be rendered only on the server and sent to the client as HTML.

From one of the creators of NextJS (in the Vercel team), the major difference between RSC and SSR is that RSC still keeps the state of any components in the client and RSC can not be hydrated like SSR (that's why we can not use React hook or event listener on server component).

For example, we have a parent component (server component) and inside we have an input (client component) for searching. We then attach onChange event on that input and now whenever we type something, we make the whole parent component re-rendered. Server component will help us keep the old state on the client side which is the data that we typed in input element while SSR will make the whole thing refresh.

(jump to the demo section in the video for demonstration)

https://www.youtube.com/watch?v=DuSa5E-GgwU

SSR is to run code on the server.

Nextjs used to allow us to do so by using getServerSideProps (doc) .

function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // Pass data to the page via props
  return { props: { data } }
}
 
export default Page

With React server component feature and following nextjs 13 ,nextjs developers can use this feature instead of getServerSideProp . (doc) .

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}
 
// This is an async Server Component
export default async function Page() {
  const data = await getData();
 
  return <main>{/* ... */}</main>;
}