ReactDOMServer
ReactDOMServer オブジェクトはコンポーネントを静的なマークアップとして変換できるようにします。これは、一般的に Node サーバで使われます。
// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');概要
以下のメソッドはサーバとブラウザの両方の環境で使用できます：
以下の追加のメソッドはサーバでのみ利用可能なパッケージ (stream) に依存しているため、ブラウザでは動作しません。
リファレンス
renderToString()
ReactDOMServer.renderToString(element)React 要素を初期状態の HTML へと変換します。React は HTML 文字列を返します。このメソッドにより、サーバ上で HTML を生成して最初のリクエストに対してマークアップを送信してページ読み込み速度を向上させたり、また SEO 目的で検索エンジンがページを巡回することを可能にします。
このようにしてサーバ側で変換されたマークアップをあらかじめ持つノード上で ReactDOM.hydrate() を呼び出した場合、React はマークアップを保持しつつイベントハンドラのみを追加するので、非常にパフォーマンスの高い初回ページロードの体験が得られます。
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)React が内部的に使用する data-reactroot のような追加の DOM 属性を作成しないことを除いて、renderToString と同様の動作をします。このメソッドは React を単純な静的サイトジェネレータとして使用したい場合に便利で、追加の属性を省略することでバイト数を削減できます。
マークアップをインタラクティブなものにするために、クライアントで React を導入しようとしている場合は、このメソッドを使用しないでください。代わりに、サーバで renderToString を、そしてクライアントで ReactDOM.hydrate() を使用してください。
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)React 要素を初期状態の HTML へと変換します。HTML の文字列を出力する Readable ストリームを返します。このストリームによる HTML 出力は ReactDOMServer.renderToString が返すものと全く同じです。このメソッドにより、サーバ上で HTML を生成して最初のリクエストに対してマークアップを送信してページ読み込み速度を向上させたり、また SEO 目的で検索エンジンがページを巡回することを可能にします。
このようにしてサーバ側で変換されたマークアップをあらかじめ持つノード上で ReactDOM.hydrate() を呼び出した場合、React はマークアップを保持しつつイベントハンドラのみを追加するので、非常にパフォーマンスの高い初回ページロードの体験が得られます。
補足：
この API はサーバ専用です。ブラウザでは利用できません。
このメソッドが返すストリームは UTF-8 でエンコードされたバイトストリームを返します。別の方式でエンコードされたストリームが必要な場合、テキストのトランスコーディングのためにストリーム変換を提供している iconv-lite のようなプロジェクトを参照してください。
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)React が内部的に使用する data-reactroot のような追加の DOM 属性を作成しないことを除いて、renderToNodeStream と同様の動作をします。このメソッドは React を単純な静的サイトジェネレータとして使用したい場合に便利で、追加の属性を省略することでバイト数を削減できます。
このストリームによる HTML 出力は ReactDOMServer.renderToStaticMarkup が返すものと全く同じです。
マークアップをインタラクティブなものにするために、クライアントで React を導入しようとしている場合は、このメソッドを使用しないでください。代わりに、サーバで renderToNodeStream を、そしてクライアントで ReactDOM.hydrate() を使用してください。
補足：
この API はサーバ専用です。ブラウザでは利用できません。
このメソッドが返すストリームは UTF-8 でエンコードされたバイトストリームを返します。別の方式でエンコードされたストリームが必要な場合、テキストのトランスコーディングのためにストリーム変換を提供している iconv-lite のようなプロジェクトを参照してください。