server side rendering using webpack

Question

I am using Reactjs, webpack along with page.js (routing) to build a webapp. Webpack gives me a bundle.js which is loaded on the client side.

I found out the og Meta tags can't be crawled if I am loading them on the client so, I have to implement it on the server side (server side rendering). Is there any way to implement it ?

(I didn't find proper documentation about this on net).

Answer 1

A lot of people are rendering the "shell" of the html with another template language on the server (since only the server needs to render it). You shouldn't use React to render stuff outside the body using normal APIs (there are known issues with that). However you can use renderToStaticMarkup, which I think is a nicer way as you are not introducing another template language on the server just to render the shell.

Of course this means that you can't update something like the meta description or document.title in a normal React way, you would have to just do it with plain old JavaScript. Alternatively I recommend react-helmet (which can modify the meta and title when the server renders too).

I made an example here which may be helpful - https://github.com/DominicTobias/universal-react/