Server-side rendering a React app is a miracle on-par with childbirth and modern air travel.
OK, that opening sentence was a little over-the-top. I apologise to birth mothers and those in the aviation industry.
Let me start again: server-side rendering a React app is...kind of cool.
That said, it can be a little tricky to get started, especially if you're trying to do it with an existing app.
We'll build up a simple example to demonstrate. I'm going to assume you've got some knowledge of:
However, you are not required to have knowledge of:
Let's do this.
There are a number of ambitious projects out there that aim to eliminate duplication between platforms by using a common set of React primitives. react-native-web, ReactXP and react-primitives spring to mind. However, these rely on not only a common set of components, but also a common approach to things like styling and animations.
Whilst we wait for the dust to settle on which is the best generic solution to use, my team has come up a simple approach that extends upon a pattern that is already quite well known in the React community. In this post I'll outline this approach.