Should I use React Server-Side Rendering?

There is a lot of information on the web about how to use server-side rendering, or SSR, with React. But the question you'll want to answer first is: should I use it?

Server-side rendering is very cool, and a must-have in certain situations, but it comes with drawbacks.

Before you jump into server-side rendering, consider carefully:

Does server-side rendering make sense for my React app?

Here are three topics to consider when looking at server-side rendering:

• SEO: Rendering server-side helps search engine crawlers find your content, but sometimes Google can find your content without SSR.
• Performance: SSR will usually increase performance for your app, but not always.
• Complexity: Using SSR will increase the complexity of your application, which means less time working on other features and improvements.

SEO

Historically, search engine crawlers do not support JavaScript. For apps built entirely with React, this means the crawler is seeing a blank page. That means your site won't show up in search engines at all.

Fixing this problem could be the single biggest reason to go for server-side rendering.

But there is another way out. Google's crawler now renders JavaScript in certain situations. I go into details in my react SEO post. If that approach works for you, you could save yourself a lot of effort and skip server-side rendering altogether.

The catch is that Google seems to be the only search engine that renders JavaScript right now. Yahoo, Bing, and Baidu do not.

Performance

Server-side rendering can improve performance in many situations but worsen it in others.

SSR can improve performance 🐰

After the browser downloads HTML & CSS, it can display your rendered components to the user without waiting for JavaScript to download or React to render.

If your JavaScript file is very large, this can be a big improvement.

The web page won't be interactive until the JavaScript downloads and React boots up, but perceived performance is still improved because your user sees content sooner.

SSR can degrade performance 🐢

SSR is more work for your server, so your HTTP response will take a little longer to return. A lot longer if your servers are under heavy load.

The size of your HTML will be increased and will take longer to download. For most apps this should be negligible, but could become a factor if your React components contain long lists or tables.

Other Performance Factors

When a single user loads multiple pages on your site or returns often, your JavaScript file should be cached. SSR will provide less of a performance boost in this situation.

We cannot say performance is better with SSR or performance is worse with SSR. Neither statement would be true in general.

Complexity

Server-side rendering increases the complexity of an app in a few ways.

• Node support: Your React components will need to run on node. Check if window and other browser-specific APIs exist before using them.
• Two routers: If you use react-router on the client side, you'll need to rewrite those same routes on your server.
• APIs: If your React components make requests to your API, these requests may need to behave differently when they run on the server, perhaps by directly querying your database or other application logic.

Adding SSR to your site isn't trivial, so don't use it unless you need it for performance or SEO reasons. To find out if those apply to you, read on.

When to Use SSR

Use SSR if... ✅

• You need SEO on Bing, Yahoo, or Baidu.
• You already have a working React app, need the best possible performance, and are willing to pay for the extra server resources.

Don't use SSR if... 🚫

• Your React app isn't finished yet: get it working first!
• SEO on Google is good enough. (Make sure that Google is crawling your content.)
• Server resources are scarce, perhaps due to a low budget or inability to scale.

Three Alternatives to SSR

If you would rather not use server-side rendering, here are a couple alternatives:

1. Render client-side as usual. Rely on Googlebot's JavaScript crawling features for SEO, and focus on other areas of your app for performance improvements. Your SEO will suffer on Baidu, Bing, and Yahoo.

2. Place some information inside your mount element. Crawlers will see it, and React will replace it. Like this:

<div id="mount">
  This content is searchable.
</div>

3. Use a service. prerender is a service that will store a cached version of your pages. Netlify has a similar feature. This helps with both SEO and performance, while keeping your code simple.

Takeaways

Don't use SSR just because it's sexy right now - it comes with a cost.

Consider whether or not server-side rendering makes sense for YOUR app, and decide accordingly.