Server side rendering of React app in 2021 (announcement)

I have been working in React for quite some time now. However, there has always been one very basic thing that has given me a lot of trouble.

Server side rendering.

The tutorials that I followed always had one issue or the other. Sometimes it would be out of date. Sometimes it would contain assumptions that did not work for me. Or it would not cover the topics that I needed (and their code would be incompatible with my needs). Or at times, the tutorial would be outright wrong!

That brings me to this point. I am in the process of creating a guide to setting up a React SSR app from scratch. No create-react-app. No NextJS. Here’s the list of features / topics that would be enabled / covered -

  • Server side rendered React app (duh!)
  • Routes. Example: /, /about, /user/:user:id
  • Support for images
  • Styling (using EmotionJS — a CSS-in-JS library)
  • Support for hashed JS files (to prevent browsers from serving old code)
  • State management (using Redux)

The latest code is currently available here — https://github.com/gdebojyoti/genshin-db/. It is part of a web app that I am working on. It is related to the video game Genshin Impact.

Obviously, I do not expect you to just clone the repository and be done with it. Of course not. A couple of the listed features are pending as well. Like I said, it’s currently a work-in-progress. However, it should be ready very soon.

Please let me know in the comments if you would find a step-by-step tutorial (written as a blog post on Medium) for this project (enabling React SSR) useful. Or if you would prefer a YouTube video.

Also, do let me know if there are other features that would like to see integrated.

Cheers!

Lead Software Developer at Housing / PropTiger with a passion for UI / UX development.