Home/SSR
-

SSR

Bundler

React Server is unopiniated about SSR, you need to use a Bundler like Vite or Webpack in order to really leverage SSR.

Even if you don't need SSR, a bundler makes things much easier.

React Server can do different things out of the box.

BFF vs. Backend

  • A BFF serves the purpose of rendering your client side code on the server. It fetches data on the server and prerenders raw html which can be served to your client. You can, but don't have to use React Server as BFF. You can also use Next.js as BFF and use react-client's renderComponent utility to fetch data during SSR.
  • A Backend does more than a BFF. It provides the backend business logic for your (micro)services and communicates with the BFF / Frontend through an API. React Server helps you write backend services using components, states and effects.

In a production setting you would usually have both. A BFF which is deployed together with your frontend on the CDN's Edge and a Backend which probably runs in some kind of cluster although you could also use an EC2 micro instance to host a backend if you don't expect a lot of traffic.

The BFF can facilitate data fetching libraries like Apollo client to fetch and cache your data on the CDN's edge. This reduces TTFB and allows your web application to serve prerendered HTML which may offer additional benefits.

React Server

React Server makes more sense in a Backend context, but you can use it instead of e.g. express in order to provide serverside rendering which seamlessly integrates with the frontend library.

You just need to pass a suspend and ssr flag to useComponent and it will automatically suspend during SSR and CSR. This seamlessly integrates with Apollo clients's SSR support and allows us to use the same useComponent hook during SSR as on the client. You basically don't need to change anything besides a few flags in order to enable serverside rendering.

This of course assumes you have a working SSR setup with your bundler and all your dependencies support SSR in a production builld.

You can read more on how to implement SSR with popular frameworks like Vite and Next.js.

React Server is compatible with both frameworks but it doesn't abstract the differences between them. So you would still need to adapt your code if you want to switch from Next.js to Vite or vice versa.