Reactのサーバーサイドレンダリング(SSR)の実装方法について、React単体のシンプルなものから、React Router, Reduxを組み合わせたものまでまとめます。 サーバーサイドはExpressを用います。 ※以下のJavaScriptのコードについて、クライアントサイドについてのみJSX + ES6形式でコーディングしており、webpackでcompileして利用しています React単体でSSR React単体でSSRを実現する場合は、ReactDOMServer.renderToStringを使用します。 参考にしたソース React単体のSSRを実装するにあたっては以下のソースを参考にしました。 react-server-example APP_PROPSを利用してfetchしたデータをクライアント側のjsと共有する点を参考にしました 静的な情報をレンダリングするパタ

Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介します。 実現したいこと コンポーネントの再利用によってどのようなことを実現したいのかイメージしてもらうため、馴染みのあるアプリケーションの機能を具体例として挙げてみます。 Gmailで名前にマウスオーバーしたときに出るプロフィール情報 プロフィール画像の表示