Server-side rendering(SSR) is one of the main features of ReactJS 16. Let us see how the SSR works in React 15 and its changes and improvements in React v16.0.
Server-side rendering in React 15
To do SSR in React 15, we mostly run a Node-based web server like Express, Koa, or Hapi and call
renderToString in order to render the root component to a string. Then, instruct the client-side renderer in the client bootstrap code using
render() to “rehydrate” the server-generated HTML and the same method would be used in a client-side rendered application too. If this is done effectively, then the client-side renderer can simply utilize the existing server-generated HTML without upgrading the DOM.
Improvements of server-side rendering in ReactJS 16
SSR is totally rewritten in ReactJS 16 and is really very fast i.e about 3x faster than React 15. ReactJS 16 supports streaming which makes the transfer of data to the client more faster. ReactJS 16 offers two methods
render() for rendering on the client side. As we know very well,
render() is used for rendering the content exclusively on the client side,
hydrate() is used for rendering over server-side rendered markup.
render() can even now be utilized to render over server-side rendered markup, but it is suggested to utilize
hydrate() now for that sort of rendering in React 16. Moreover, ReactJS 16 is more useful at hydrating server-rendered HTML and it doesn’t require the initial render to precisely match the outcome from the server. Rather, it will try to reuse as much of the current DOM as possible.
Why React 16 server-side rendering is much faster than React 15?
In ReactJS 15, the client and server rendering paths were pretty much a similar code. This means that most of the data structures required to keep up a vDOM were being set up when server rendering, despite the fact that vDOM was discarded when the call to
renderToString returned. This shows that there was a lot of work wasted on the server render path.
Whereas in ReactJS 16, the server renderer was completely rewritten from scratch by the core team because of which it doesn’t do any virtual DOM work at all. Hence, it is much faster than ReactJS 15.
Some of the important features of React 16 SSR are:
It is completely backward compatible
It supports client-side renderer and its segments to return fragment, string, and array of elements.
It creates more effective HTML document size.
It supports non-standard DOM attributes which means that both server and client renderer can go through non-standard attributes adding to HTML components.
React 16 SSR supports streaming. To avail ReactJS 16’s render to stream, it is necessary to call one of two methods
It doesn’t support portals or error boundaries.
It doesn't need to be compiled for effective performance.
Benefits of ReactJS Server-Side Rendering
Nowadays, server-side rendering has turned into an essential feature specifically for substantial client-side applications and now the majority of the client side frameworks supports it. It helps you:
When you need SEO on Yahoo, Bing, Google, Baidu, or DuckDuckGo.
When you already have a proper functioning React application, require the ideal execution, and are ready to pay for the additional server resources.
Utilizing React on the server can be difficult, particularly while fetching data from Application Programming Interfaces. Fortunately, the React team is flourishing and building plenty of useful tools.