SSR サーバーサイドレンダリング

react-domモジュールのreact-dom/serverが提供するrenderToStringを使うことで React 要素を静的レンダリングできます。

renderToStringにはReact.ReactElementをそのまま渡します。

const React = require('react');
const {renderToString} = require('react-dom/server');

console.log(
  renderToString(
    React.createElement(
      'div',
      undefined,
      React.createElement('span', undefined, 'React SSR!')
    )
  )
);

このスクリプトは以下の HTML を表示します。

<div data-reactroot="">
  <span>React SSR!</span>
</div>

このようにして生成した HTML を初回フロントで表示することで、 JavaScript を実行するより前に結果を表示できます。

リポジトリ

この内容はココからクローンして試すことができます。