Is server side rendering difficult to setup in reactjs? Would you recommend rendering components on server?
Hey Tom. We use Server Side Rendering (SSR) in our app and we believe it provides a really good experience for our users. The users see the contents right away and your app feels responsive. Not to mention the SEO benefits of SSR.
Difficulty of setting up SSR depends on your project. If the app is NodeJS based, then it should be relatively quicker to setup SSR. This read could be helpful– https://24ways.org/2015/universal-react/
That you would even use react.js in the first place is bad, using it just because you want to generate markup? Even worse -- particularly given the inaccessible non-semantic gibberish it has the tendency of vomiting up.
There's a reason things built with react (like this site) are a giant middle finger to accessibility, and why it's best restricted to crapplications, not websites... and really the only reason to server-side generate what react craps out would be building websites...
At which point just output semantic markup in a logical document order; I know, the horrors of actually having to understand what HTML is, how to use it, and how to develop for all users, not just the handful willing to stomach the scripttardery.
Stephan de Vries
Full stack developer, enthusiastic about new technologies.
Server side rendering (SSR) is one of the bigger reasons why I love React, because it gives you best of both worlds! SSR gives you a lot of advantages like:
No need for PhantomJS or Prerender!
Because the content is already there when loading!
Instead of having to wait for javascript to take over and serve you the content, it's already there when loading the page!
Giving you the above benefits, while preserving the great user experience you have on the client.
Server side rendering can however become difficult to setup. For instance, if your components depend on asynchronous API calls, you have to create logic that takes care of the API calls before returning a response. You have to set an initial state based on these API calls, so somehow you have to pass that to the client. Then there's image requiring on the server. On the client Webpack takes care of this (assuming you'd be using Webpack), but on the server node will throw a syntax error when requiring images.
TLDR; It can be a pain to setup server side rendering, but it's definitely worth everything!
If you don't want to go through the trouble of having to setup server side rendering, then take a look at MERN, an amazing project by Hashnode itself, giving you server side rendering out of the box!