すみません、こちらの記事に完全にお世話になりました。
サーバーサイドReactをwebpackを使って最小構成で試す (ES6 ＆ TypeScript) - Namiking.net
以下、すべて写経のメモになります。
いつものクライアントレンダリング
まずは、HTML。
gistacfad61f449711923e3c6d0aa68a654f
次に、Webpackに通す前のJS。
gistf317fadd4053798bd4a38b38ee2ace70
gist276d714f3d4e67f92c725a20e180e93f
ブラウザで確認すると以下のとおり。
クッリクインクリメントなカウンタの完成。
初めてのサーバサイドレンダリング
次に、サーバサイドレンダリング。
今度はexpressを使ってReactコンポーネントを描画する。
gistaf2f5984b67c9b87133885d00ba1d805
ReactDOMServer.renderToString が肝らしい。
ただし、このままでは、描画はされるけどイベントは起こらない。
描画後に、先ほど作成したクライアントのJSを読みこませるように変更する。
gist8dc4d16c1c6d894474b3c35da602bfd9
これで、先ほどと同じように、クリックカウンタが描画された。
サーバサイドレンダリングのメリット
なるほど。
