Start a personal dev blog on your domain for free with Hashnode and grow your readership.

What is the difference between server side rendering using React vs using Express in Node.js?

Denny Trebbin's photo

Lead Developer. Experimenting with bleeding-edge tech. Irregularly DJ. Hobby drone pilot. Amateur photographer.

Let me try to answer.

The main difference is only when the browser enables the user to interact with the page and how machines have access to individual data.

Let's assume you want to run a simple blog. No comments, no widgets, no interaction other than scrolling and open next or previous blog post.

Node+Express You run Express typically together with Jade. When the browser request hits the Express server, Express tries to figure how to and what to respond. For our simple blog, it might be a Jade template. This Jade template may reference existing blogs fetched from files lingering around in a local, accessible folder. Express+Jade loads all the defined data, render into incomplete HTML string then completed by the site template Jade file (head, meta, title, etc.). This HTML is then sent back to the Browser and rendered.

React Server Side Pretty much the same happens when you use React Server Side rendering. Except instead of Jade we use JSX.

So far no difference between both solutions. Links to next or previous blog posts are just simple <a href="/some-blog>Next</a> elements.

React Server side is equally cheap to Node+Express+X

But at the moment when you decide to add interactions or widgets one tech stack will fall behind, and it's not React. The reason is that React Server Side rendering doesn't require JavaScript to run on the client side; this enables SEO out of the box.

Node+Express also have SEO support, but without impact, you can't run all JavaScript to render HTML. Some jQuery plugins require live access to the browsers window object which can't be mocked easily on the server side. Running your JavaScript on PhantomJS is possible, but it adds a lot of code and configuration and processing time.

React Server Side is easier because React has it's own synthetic event system and doesn't require access to the browsers window object at any time. Even widgets (React based) render exceptionally well.

The tech stack for React Server Side rendering isn't expensive, but the mental model it can be. Processing state on the server, de-hydrating state, sending the state to the client, hydrating the state, allow user interactions and send to user changed state back to the server; the cycle begins again.

To sum it up. Node+Express can do the same as React Server Side rendering. Maybe not equally easy or equally fast but both tech stacks are qualified for real projects.

Alok Deshwal's photo

if anyone is going to build a classified website, which one should be opted for the best performance ?

Denny Trebbin's photo

Developer experience is more important than runtime performance. The tools around React are awesome (I'm biased, of course). Enabling you to be creative and staying motivated is what should count for long term projects. What does it help to know that some part of your environment consists all the knowledge of 20+ years engineering when the developer experience is terrible, hindering you being creative. Go to mern.io and you'll find a good starting point. Promised!

j's photo

react server side rendering is mainly for the isomorphic approach because of the transferred virtual DOM that's the difference from the result. the react component than will only need a short bootstrapping process on the client before you already can use it with react without re-rendering.

The rendering procedures on the server are usually that it provides the Markup "html" which is than delivered to client.

React vs plain HTML strings on the other hand would be an extra step of the rendering process so actually if you don't use the isomorphic approach the only reason to do react server-side rendering is to maintain the same code base for templates.

because the rendering on the server has no browser and rendering inside of the browser is the costly thing why you want to use the virtual dom.

Btw mentioning a view library and a server engine for comparison is quite confusing imho :)

Alok Deshwal's photo

will there be any specific difference (in terms of speed etc) between express and react

j's photo

depends on the complexity of your rendering engine used. if you just deliver an static html paylod you can proxy-cache it with something like nginx or varnish or a cloud cdn which will reduce the traffic and increaese the "speed" significantly. if you use another rendering engine in express than you would have to compare the view/template engines with each other.