Reactサーバーサイドレンダリングに関するリソースまとめ

## Learn

* [★17644 enaqx/awesome-react](https://github.com/enaqx/awesome-react#server-side-rendering)
    * A collection of awesome things regarding React ecosystem.
* [★383 kohei-takata/learnyoureact](https://github.com/kohei-takata/learnyoureact)
  * Let's learn React.js and server side rendering!
* [★249 dimaip/server-side-rendering](https://github.com/dimaip/server-side-rendering)
  * Interactive guide to server-side rendering with Webpack, React, React Transmit, CSS modules and more
* [Server-Side Rendering With React, Node And Express – Smashing Magazine](https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/)
* [React + Expressでのサーバーサイドレンダリング方法のまとめ - Qiita](http://qiita.com/hmarui66/items/4f75e624c4f70d596873)

## Libraries

* [★2491 airbnb/hypernova](https://github.com/airbnb/hypernova)
  * A service for server-side rendering your JavaScript views
* [★1652 aickin/react-dom-stream](https://github.com/aickin/react-dom-stream)
  * A streaming server-side rendering library for React.
* [★308 walmartlabs/react-ssr-optimization](https://github.com/walmartlabs/react-ssr-optimization)
  * React.js server-side rendering optimization with component memoization and templatization
* [★830 halt-hammerzeit/webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools)
  * Server-side rendering for your Webpack-built applications (e.g. React)
* [★259 gabrielbull/react-router-server](https://github.com/gabrielbull/react-router-server)
  * Server Side Rendering library for React Router v4.
* [★552 Rezonans/redux-async-connect](https://github.com/Rezonans/redux-async-connect)
    * It allows you to request async data, store them in redux state and connect them to your react component.
* [★337 makeomatic/redux-connect](https://github.com/makeomatic/redux-connect)
    * Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React


## Examples

* [★1449 DavidWells/isomorphic-react-example](https://github.com/DavidWells/isomorphic-react-example)
    * ReactJS + NodeJS ( express ) demo tutorial with video. Universal/Isomorphic JS = Shared JavaScript that runs on both the client & server.
* [★1448 mhart/react-server-example](https://github.com/mhart/react-server-example)
  * A simple example of how to do server-side rendering with React (no compilation needed)
* [★440 ryanflorence/react-router-mega-demo](https://github.com/ryanflorence/react-router-mega-demo)
  * WIP Move Along
* [★310 webpack/react-webpack-server-side-example](https://github.com/webpack/react-webpack-server-side-example)
  * Example of an react application with webpack including server-side rendering.
* [★267 barbar/vortigern](https://github.com/barbar/vortigern)
    * A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more.
* [★240 mhart/react-server-routing-example](https://github.com/mhart/react-server-routing-example)
  * An example using universal client/server routing and data in React with AWS DynamoDB
* [★172 jesstelford/react-isomorphic-boilerplate](https://github.com/jesstelford/react-isomorphic-boilerplate)
  * Isomorphic Server & Browser Side Rendering with React >= 0.12
* [★86 jmfurlott/react-isomorphic-boilerplate](https://github.com/jmfurlott/react-isomorphic-boilerplate)
* [★29 koba04/react-server-side-rendering-sample at minimum](https://github.com/koba04/react-server-side-rendering-sample/tree/minimum)
  * My attempt at providing an isomorphic React app
* [★23 Spraso/modern-web-series](https://github.com/Spraso/modern-web-series)
  * Code supporting the Developing for a modern web with React.js series
* [★258 zen-js-code/react-universal-web-apps](https://github.com/zen-js-code/react-universal-web-apps)
    * The application contains several variants, each in its separate branch, progressively demonstrating various paradigms for writing universal JavaScript with React, React Router, Node and Express.

## Reduxでやる場合

* 基本的には[Reduxのドキュメント](http://redux.js.org/docs/recipes/ServerRendering.html)にあるような感じで、特別な実装は入らない
* AsyncなStateに対応するために、[makeomatic/redux-connect](https://github.com/makeomatic/redux-connect)を使う

## Railsでやる場合

* [airbnb/hypernova](https://github.com/airbnb/hypernova)を使う
    * サーバーサイドレンダリングされたReact DOMに対しても、要素を破棄することなくJavaScript側の処理が正しく適応される
    * hypernova serverが落ちていた場合、サーバーサイドレンダリングは行われないが、JavaScriptは正常に機能するため、DOMが表示されないということがない(fall-back)
* [RailsでReduxコンテナをサーバサイドレンダリング (use Hypernova by airbnb) - Qiita](http://qiita.com/noriaki/items/38fd9e9619c41ad74301)



## 国内事例

* [リクルートテクノロジーズのフロントエンド開発 2016 - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2016/12/01/175446)
* [pixiv Sketchのフロントアーキテクチャ - pixiv inside](http://inside.pixiv.net/entry/2016/12/12/172930)
* [アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog](https://developers.cyberagent.co.jp/blog/archives/636/)
* [アメブロ2016 ~ Isomorphic JavaScriptの詳しい話 | CyberAgent Developers Blog](https://developers.cyberagent.co.jp/blog/archives/3513/)
* [開局6か月／900万DL突破の「AbemaTV」、急成長するウェブサービスを支えるフロントエンドエンジニアの舞台裏：CodeZine](http://codezine.jp/article/detail/9733)