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.
In this post I’ll explain one way you can implement server-side rendering (SSR) for an app that's using React Router v4 and Redux Thunks.
Along the way we'll discuss the fundamental difference between JavaScript clients and servers, how it forces us to change the way we do routing, and the small "missing-link" that enables us to bridge React Router v4 with Redux thunks.
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.
One of the hottest JavaScript libraries out there right now is React. Whilst there are many good reasons for React being so popular, the main reason my team picked React for our new project is because of the commonality between React and React Native. The concepts and the language are the same, so if you can write React, then you can write React Native. There is also the benefit of being able put both in the same project and then share business logic between them, which is precisely what we need to be able to do.
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.
“The collective knowledge of my workmates is amazing, and it’s always on hand to help me improve my own skills.
Whenever I need tools or resources to do my job, they are provided without hesitation.
The leadership team truly believes that our people are our best asset, and it shows in the way the organisation is run.
I am always proud to say that I work for Shine.”
“I’ve been with Shine almost 15-years, and it’s the leadership that makes Shine a great place to work.
The founders of Shine are…wait for it…’real people’!
I have always felt that they are genuinely caring of their staff – approachable, honest, open.
They definitely want to see their staff be the best they can be and provide the support and guidance needed to do just that.
I love working here.”
“Since I joined Shine in 2017, I have been surrounded by brilliant, friendly and talented people, where work-life balance is a priority.
I always seek new challenges in my career and Shine gave me the opportunity to become a People Lead last year and I have been promoted recently as a Senior Software Engineer.
Shine is definitely a great place to grow and develop both professionally and personally.”
“Working at Shine has been great for me. It’s challenging, yet rewarding.
The Shine team are professional, highly skilled, and great fun to be around.
Shine has a respectful inclusive culture and focuses not only on skill growth but also personal wellbeing.
The thing I value the most is the trust that Shine puts in me to do the job the way I think it should be done.”
“It’s the leadership that makes Shine a great place to work. The founders of Shine are…wait for it…’real people’! I have always felt that they are genuinely caring of their staff – approachable, honest, open. They definitely want to see their staff be the best they can be and provide the support and guidance needed to do just that. I love working here.”