Adding server-side rendering to existing React+Redux+React-Router App hosted on Firebase

Question

I currently have a Single Page Application using( React+Redux+React-Router) hosted on firebase hosting. I want to implement server side rendering, for which I am aware I need to run a node/express server on something like Heroku, but I'm unclear how to do this. I have seen many starter boilerplates i.e Este that incorporate server-side-rendering but I want to add this capability to an existing Project. Somehow, The static content hosted on firebase should have access to my server but again unclear how to implement it so i can get al the benefits involved with SSR.

Answer 1

Since you are already using Firebase you can utilize Firebase functions.

Just setup a new function which intercepts your http request and then you just fetch all the stuff you need and render to a string with react routers render to string method.

There is a good tutorial covering all the bits and pieces of this here https://m.youtube.com/watch?v=82tZAPMHfT4