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 を実行するより前に結果を表示できます。
リポジトリ
この内容はココからクローンして試すことができます。
