<p dir="auto">I ran a few benchmarks on the server (modifying <a href="https://github.com/paulshen/react-bench">https://github.com/paulshen/react-bench</a> to not use jsdom). The results were surprising, as the browserified <code class="notranslate">react.js</code> was about <strong>30% faster</strong> than the npm version, even with <code class="notranslate">NODE_ENV=production</code>.</p>
<p dir="auto">The performance ranking (test run time) was <code class="notranslate">react.min.js</code> &lt; <code class="notranslate">react.js</code> &lt; <code class="notranslate">NODE_ENV=production node react</code> &lt; <code class="notranslate">node react</code>.</p>
<p dir="auto">I suspect <code class="notranslate">process.env</code> is not a regular js object but perhaps a getter and thus carries a penalty when you test for <code class="notranslate">"production" !== process.env.NODE_ENV</code> everywhere.</p>
<p dir="auto">Also the minified version might still perform best of all, as at least some time ago V8 used function source length (including comments) as a heuristic for function complexity / compilation time and thus affecting chances for optimization in some cases, but the effect might be negligible.</p>
<p dir="auto">I have recently adapted my app to use server-side rendered markup and then reconciliate it with the client to increase loading speeds.<br>
React correctly recognizes the rendered markup and doesn't actually touch the dom on the first rendering step.</p>
<p dir="auto">However, when I interact(clicking, dragging, etc) with any server-side rendered react components I get the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Invariant Violation: findComponentRoot .... Try inspecting the child nodes of the element with React ID ``"><pre class="notranslate"><code class="notranslate">Invariant Violation: findComponentRoot .... Try inspecting the child nodes of the element with React ID ``
</code></pre></div>
<p dir="auto">I understand this is a side-effect of dom mutation, however no such mutation has occured in the react element container.</p>
<p dir="auto">Altering the state programatically(as opposed to interacting with clicks etc) does not cause these errors.</p>
<p dir="auto">Here is the server-side rendered markup:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;viewport&quot; data-reactid=&quot;.0&quot; data-react-checksum=&quot;-1591792822&quot;&gt;
  &lt;div class=&quot;login-view&quot; data-reactid=&quot;.0.0&quot;&gt;
    &lt;div class=&quot;wrapper&quot; data-reactid=&quot;.0.0.0&quot;&gt;
      &lt;img src=&quot;images/logo.png&quot; class=&quot;logo&quot; width=&quot;150&quot; height=&quot;164&quot; data-reactid=&quot;.0.0.0.0&quot;&gt;
      &lt;div class=&quot;form&quot; data-reactid=&quot;.0.0.0.1&quot;&gt;
        &lt;div class=&quot;input-container username&quot; data-reactid=&quot;.0.0.0.1.0&quot;&gt;
          &lt;div class=&quot;label username-label icon ss-standard ss-user&quot; data-reactid=&quot;.0.0.0.1.0.0&quot;&gt;
          &lt;/div&gt;
          &lt;input class=&quot;username&quot; type=&quot;email&quot; name=&quot;username&quot; placeholder=&quot;Email&quot; value=&quot;&quot; data-reactid=&quot;.0.0.0.1.0.1&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-container password&quot; data-reactid=&quot;.0.0.0.1.1&quot;&gt;
          &lt;div class=&quot;label password-label icon ss-standard ss-lock&quot; data-reactid=&quot;.0.0.0.1.1.0&quot;&gt;
          &lt;/div&gt;
          &lt;input class=&quot;password&quot; type=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; value=&quot;&quot; data-reactid=&quot;.0.0.0.1.1.1&quot;&gt;
        &lt;/div&gt;
        &lt;button class=&quot;button login&quot; data-reactid=&quot;.0.0.0.1.2&quot;&gt;
          Login
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;img src=&quot;images/waves.png&quot; class=&quot;waves&quot; width=&quot;1366&quot; height=&quot;94&quot; data-reactid=&quot;.0.0.1&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;app hide&quot; data-reactid=&quot;.0.1&quot;&gt;
    &lt;div class=&quot;sidebar phone&quot; data-reactid=&quot;.0.1.0&quot;&gt;
      &lt;div class=&quot;categories&quot; data-reactid=&quot;.0.1.0.0&quot;&gt;
        &lt;div class=&quot;categories-header&quot; data-reactid=&quot;.0.1.0.0.0&quot;&gt;
          &lt;div class=&quot;text&quot; data-reactid=&quot;.0.1.0.0.0.0&quot;&gt;
            Categories
          &lt;/div&gt;
          &lt;div class=&quot;arrow ss-standard ss-navigatedown&quot; data-reactid=&quot;.0.1.0.0.0.1&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;categories-scroller&quot; data-reactid=&quot;.0.1.0.0.1&quot;&gt;
          &lt;div class=&quot;categories-wrapper&quot; data-reactid=&quot;.0.1.0.0.1.0&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;add-category&quot; data-reactid=&quot;.0.1.0.1&quot;&gt;
        &lt;div class=&quot;icon ss-standard ss-plus&quot; data-reactid=&quot;.0.1.0.1.0&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;text&quot; data-reactid=&quot;.0.1.0.1.1&quot;&gt;
          Add Category
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;bottom-menu&quot; data-reactid=&quot;.0.1.0.2&quot;&gt;
        &lt;div class=&quot;settings&quot; data-reactid=&quot;.0.1.0.2.1&quot;&gt;
          &lt;div class=&quot;icon ss-standard ss-settings&quot; data-reactid=&quot;.0.1.0.2.1.0&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;text&quot; data-reactid=&quot;.0.1.0.2.1.1&quot;&gt;
            SETTINGS
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;minimize&quot; data-reactid=&quot;.0.1.0.2.2&quot;&gt;
          &lt;div class=&quot;icon ss-standard ss-navigateright&quot; data-reactid=&quot;.0.1.0.2.2.0&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;columns&quot; data-reactid=&quot;.0.1.1&quot;&gt;
      &lt;span data-reactid=&quot;.0.1.1.0&quot;&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">viewport</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0</span>" <span class="pl-c1">data-react-checksum</span>="<span class="pl-s">-1591792822</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">login-view</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">wrapper</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">images/logo.png</span>" <span class="pl-c1">class</span>="<span class="pl-s">logo</span>" <span class="pl-c1">width</span>="<span class="pl-s">150</span>" <span class="pl-c1">height</span>="<span class="pl-s">164</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.0</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">form</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">input-container username</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1.0</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">label username-label icon ss-standard ss-user</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1.0.0</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">class</span>="<span class="pl-s">username</span>" <span class="pl-c1">type</span>="<span class="pl-s">email</span>" <span class="pl-c1">name</span>="<span class="pl-s">username</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Email</span>" <span class="pl-c1">value</span>="" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1.0.1</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">input-container password</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1.1</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">label password-label icon ss-standard ss-lock</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1.1.0</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">class</span>="<span class="pl-s">password</span>" <span class="pl-c1">type</span>="<span class="pl-s">password</span>" <span class="pl-c1">name</span>="<span class="pl-s">password</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Password</span>" <span class="pl-c1">value</span>="" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1.1.1</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">button login</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.0.1.2</span>"<span class="pl-kos">&gt;</span>
          Login
        <span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">images/waves.png</span>" <span class="pl-c1">class</span>="<span class="pl-s">waves</span>" <span class="pl-c1">width</span>="<span class="pl-s">1366</span>" <span class="pl-c1">height</span>="<span class="pl-s">94</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.0.1</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">app hide</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">sidebar phone</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">categories</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.0</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">categories-header</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.0.0</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">text</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.0.0.0</span>"<span class="pl-kos">&gt;</span>
            Categories
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">arrow ss-standard ss-navigatedown</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.0.0.1</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">categories-scroller</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.0.1</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">categories-wrapper</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.0.1.0</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">add-category</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.1</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">icon ss-standard ss-plus</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.1.0</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">text</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.1.1</span>"<span class="pl-kos">&gt;</span>
          Add Category
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">bottom-menu</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.2</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">settings</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.2.1</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">icon ss-standard ss-settings</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.2.1.0</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">text</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.2.1.1</span>"<span class="pl-kos">&gt;</span>
            SETTINGS
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">minimize</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.2.2</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">icon ss-standard ss-navigateright</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.0.2.2.0</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">columns</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.1</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">data-reactid</span>="<span class="pl-s">.0.1.1.0</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I am calling renderComponent on the client, on the dom node that contains that server-rendered markup.<br>
E.g</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="viewportElement  = document.getElementById(&quot;viewport-element&quot;)
React.render(&lt;Viewport /&gt;, viewportElement)"><pre class="notranslate"><span class="pl-s1">viewportElement</span>  <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"viewport-element"</span><span class="pl-kos">)</span>
<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">Viewport</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-s1">viewportElement</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Thanks for creating and maintaining this amazing UI framework!</p>