読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

React + Webpack + Expressで初めてのサーバサイドレンダリング

すみません、こちらの記事に完全にお世話になりました。

 

サーバーサイドReactをwebpackを使って最小構成で試す (ES6 & TypeScript) - Namiking.net

 

以下、すべて写経のメモになります。

 

いつものクライアントレンダリング

まずは、HTML。

gistacfad61f449711923e3c6d0aa68a654f

 

次に、Webpackに通す前のJS。

gistf317fadd4053798bd4a38b38ee2ace70

 

gist276d714f3d4e67f92c725a20e180e93f

 

ブラウザで確認すると以下のとおり。

f:id:chuck0523:20160613213734p:plain

クッリクインクリメントなカウンタの完成。

 

初めてのサーバサイドレンダリング

次に、サーバサイドレンダリング

今度はexpressを使ってReactコンポーネントを描画する。

gistaf2f5984b67c9b87133885d00ba1d805

ReactDOMServer.renderToString が肝らしい。

facebook.github.io

 

ただし、このままでは、描画はされるけどイベントは起こらない。

 

描画後に、先ほど作成したクライアントのJSを読みこませるように変更する。

gist8dc4d16c1c6d894474b3c35da602bfd9

 

これで、先ほどと同じように、クリックカウンタが描画された。

 

サーバサイドレンダリングのメリット

  • 初期ロード時間の短縮化。
  • Google以外のサーチエンジンからもコンテンツのあるページとして認識させることが可能。

なるほど。