Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.
render関数と同じですが、ReactDOMServerによって描画されたHTMLコンテンツを含むコンテナをhydrateするのに利用される。Reactはイベントリスナを既存のマークアップにアタッチを試みるするだろう
React expects that the rendered content is identical between the server and the client. It can patch up differences in text content (such as timestamps), but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
Reactは、サーバーとクライアントで描画されるコンテンツが一致することを期待している。テキストコンテンツの違いを修正する事もできるが、ミスマッチをバグとして扱い修正すべきである。開発モードでは、Reactはhydration時のミスマッチに警告を出力する。ミスマッチ時の属性の違いを修正する保証はない。この挙動はパフォーマンス上重要で、大抵のアプリでミスマッチはレアケースで、全てのマークアップを比較するのは非常にコストが高い
If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a state variable like this.state.isClient, which you can set to true in componentDidMount(). This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. Note that this approach will make your components slower because they have to render twice, so use it with caution.
意図的にクライアント・サーバ間で違いのあるコンテンツを描画したい場合、２パスレンダリングが有用。this.state.isClientなどの値をcomopnentDidMountなどでセットする。１回目の描画ではサーバサイドと同じコンテンツを描画し、２回めで違うの描画する。ただし、２回描画することになるので、遅くなるのをわかった上で使えよ
Remember to be mindful of user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so if you render something different in the client-only pass, the transition can be jarring. However, if executed well, it may be beneficial to render a “shell” of the application on the server, and only show some of the extra widgets on the client. To learn how to do this without getting the markup mismatch issues, refer to the explanation in the previous paragraph.
遅い接続でのUXを心掛けることを覚えとけ。JavaScriptのコードは初期のHTML描画よりも本当に遅く読み込まれるので、違うコンテンツをクライアントのみのパスで描画する場合、その遷移は結構目障りな感じになるで。しかし、うまくやればそれは、サーバでアプリのシェル（PWA的な意味合い？）を描画するのに有用になるかも。また、クライアントでのみ余計なウィジェットを表示させるのに役立つ。これをマークアップのミスマッチ問題なしにどうやるかを学ぶには、前の段落の説明を参照してくれ。