Don't SSR private routes!
September 13, 2019
Server-side rendering in React is quite hard as it is. You have to plan and develop your whole application with SSR in mind, and you still can have a rough time setting it up. SSR is great, but it is still not quite there yet. Sometimes, it is just not worth it, and it may even be dangerous!
Let's first take a look at why you might want to have SSR. If you are familiar with SSR, you can skip this section and learn more about its pitfalls.
The most beneficial reason to have SSR is because of SEO (Search Engine Optimization). In case you are not aware, when you serve a React application, you are serving
Works without JS
All of that is great, but you have to consider if all the hassle to achieve this is worth it because as I said - server-side rendering is hard. Here are some pitfalls to consider:
Touching window object
You have to avoid touching the window object because it is not available on the server and if you try to get a property, your rendering may crash. (Note: you can still use it, but make sure it is in a mounted component). Okay, easy enough. But what if a library you are using is breaking this rule? You have to deal with this now.
Rendering content based on resolution
Imagine you have a mobile and desktop version of a component and you decide you will switch between the two based on the client's resolution. Okay, but while rendering on the server, you have no idea what resolution the client has. Let's say you always render the mobile version - but what if the user is browsing on a desktop? This can lead to some serious issues, because when the client loads the SSR-ed page, and it doesn't match with what the client-side script would have rendered, you get desynchronization between the expected and actual DOM tree. There are some workarounds, such as rendering content based on the user agent while SSR-ing, but it is far from perfect. You can easily break this logic by loading the page on desktop and shrinking the viewport. The easiest and safest way is to just use CSS if you intend to have SSR.
You may be thinking "this is not so bad, I can live with this". Well, hold on, it gets more interesting! If you are doing SSR, you probably will want to employ some sort of caching technique - and rightfully so - running servers is expensive! But now, you have to keep a separate cache for every user and you have to be very careful with this. There are a ton of ways this can go wrong! You have to make sure you are always serving the correct person a correct cached response. Otherwise, you may serve someone else's personalized page, which may break the user experience, and more importantly - you can expose your users' personal data to other users. There are a couple of ways I can think of off the top of my head in which this can go very wrong. Don't believe me? A giant like Steam had this problem - imagine opening your account settings and seeing someone else's account. You can learn more about this accident.
I can offer you a simple trade-off. You may have guessed it already (it's in the title, duh) - do SSR just for the pages that matter. You can SSR only your public pages. Those are the pages that really need good SEO, your private routes wouldn't (or shouldn't) be accessible by crawlers anyway, and the perceived loading speed difference is not going to be huge (hopefully!). You can save yourself all the hassle, time, your company's money, and your sanity by just doing SSR on public pages only! The risks to mess something up are much lower - you can even cache for much longer periods. After all, you don't expect your public page to change that often. To me, that seems like a pretty good trade-off.
Keep in mind that you can still do SSR partially. For example, if you have your user's account displayed in the header, you can SSR it without the user's account and add it on the client when the information is loaded.
I hope you now see what I mean when I say that SSR is hard. The gist of it is quite easy, but you can come across some unexpected problems, some of which can be quite dangerous. Keep in mind that these are all my opinions and experiences, in the end, what matters is that you do whatever works for you. Just remember to be careful and consider the points mentioned above!