Is including react-dom/server in your bundle a bad idea?

_react-dom-server-browser.md

Here at work, a colleague asked if we were doing a mistake by using the ReactDOM.renderToStaticMarkup on the client side. The idea was to use that for a rich text editor that needs some raw HTML inside.

Here is how the code looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
// the whole class
var markupToInsert = ReactDOMServer.renderToStaticMarkup(someReactElements);

The question is: do we care for the extra payload?

To answer this question I needed to check how much payload this would yeild. So I used browserify for that:

browserify -r react -g [ envify --NODE_ENV production  ] | uglifyjs > reactonly.js && gzip < reactonly.js > reactonly.js.gz
browserify -r react-dom/server -x react -x react-dom -g [ envify --NODE_ENV production  ] | uglifyjs > domserver.js && gzip < domserver.js > domserver.js.gz
browserify -r react-dom -r react -g [ envify --NODE_ENV production  ] | uglifyjs > reactdom.js && gzip < reactdom.js > reactdom.js.gz
browserify -r react-dom -r react -r react-dom/server -g [ envify --NODE_ENV production  ] | uglifyjs > reactall.js && gzip < reactall.js > reactall.js.gz

And here are the results:

$ ls -la
 344028 May 26 18:31 domserver.js
  73349 May 26 18:31 domserver.js.gz
 361130 May 26 18:17 reactall.js
  78356 May 26 18:17 reactall.js.gz
 357293 May 26 18:17 reactdom.js
  77736 May 26 18:17 reactdom.js.gz
  57334 May 26 18:17 reactonly.js
  13384 May 26 18:17 reactonly.js.gz

It is not possible to try to remove react-dom from react-dom/server, since they are the same package, but we can always calculate the difference in including it:

77736 - 78356 = 620 bytes

Since 620 bytes is hardly a problem, and we already had React on the component anyway, we have no problem at all. It is actually a good idea.

Thank you for sharing