Best way to improve React Server Side Rendering by avoiding NODE_ENV checks

373 views Asked by At

I am using require('babel-register') to allow for ES6 in node.js and doing server-side rendering of my react components.

In this talk (start around 7:14) https://youtu.be/PnpfGy7q96U?t=7m14s

one main recommendation to speed up React Server Side Rendering performance by 30+% is to point ReactDOMServer to the client-side version of the build

e.g. instead of var ReactDOMServer = require('react-dom/server') use var ReactDOMServer = require('react/dist/react.min')

The reason for the speed improvement is because client-side version avoids checks to process.env.NODE_ENV which turns out to be an expensive operation.

This trick seemed to work great before but in React 15 the client side code no longer directly exposes the methods for renderToString and renderToStaticMarkup. Instead it has been hidden behind the scary looking property __SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:

You can thus do something like var ReactDOMServer = require('react/dist/react.min').__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

But obviously this doesn't seem like a good idea (probably will not be forward compatible with future versions of React).

I tried require('react/dom-server/dist/react-dom-server.min') but this returns an 'undefined' (I believe that wrapper code is meant to run on the client not the server).

Are there any other suggestions for achieving this performance gain that are more sanctioned?

For reference the original issue is documented here but the issues seems to have been closed: https://github.com/facebook/react/issues/812

0

There are 0 answers