最近、私は次はあまり進展せずに前に一度投げ、プロジェクトのSSRを構築するように反応するトス。構築するプロジェクトの再スタートは、アーキテクチャを反応させます。プロジェクト出典：https://github.com/rt-zhangxuefei/react-ssr-template
：への感謝ムーのクラスのネットワークDellleeカリキュラム。ここで私はまた、いくつかのピットが発生し、代わりにサンクの真ん中をサガを使用し、中間層エージェントは、httpプロキシ・ミドルウェアを使用しています。記事私はプロセスで発生した問題のいくつかを記録する設定しました：
SSRプロセス
1）最初の画面（最初に）ブラウザを開き、任意のURLにアクセスするには、要求がサーバーノードに到達します
2）ノードのサービス）に基づいて、ディレクトリにアクセスするために、ルーティングテーブルにindex.js（routteのURLに一致
3）マッチングルーティング内部コンポーネントloaddataの呼び出し（）データを取得するために使用されるその定義、データ取得コンポーネント必要にのみ複数の経路が一致してもよいloaddataのメソッドを追加するので、loaddataの複数が存在することになります方法、これらの方法は、非同期（サーガ）です。
4）すべての非同期操作が完了すると、メソッド呼び出しrenderToString文字列をHTML描画
5）を発現ブラウザにHTML文字列を送信するサービス（データを含む）と、良好なDOMの文字列をレンダリングしました
6）ブラウザは、HTML文字列解析表示Webコンテンツ（ttfp）を取得します
7）ブラウザは、アドレス内のサーバーベースのスクリプトのsrcタグを要求し、JSファイルを反応させ、クライアントをダウンロード
8）、JSを解決実行を反応させ、それがページ全体の制御およびインタラクティブなレンダリングを引き継ぎました
9）終了
プロジェクト構造は、図に示されています
プロジェクト
アナログは伐採後にコメントを表示するためには、いくつかのインタフェース（ログイン、ログイン裁判官、記事のリストを取得し、コメントリスト）所有します
以下、CSSモジュールのサポート
水と脱水とは何ですか
服务器端通过路由匹配出的组件的loadData方法（sagas）填充store，通过html字符串里面注入script标签引入变量的方式把store传给了浏览器，这个就是脱水。浏览器加载了包含reactjs的代码以后，把服务器注入过来的js对象的数据作为默认state传入createStore方法完成脱水过程。
服务器端渲染时react-router使用StaticRouter无状态路由
这里有个很重要的属性context，如下：
这个context参数会贯穿到浏览器和服务器端，成为一个数据交互的桥梁。比如判断前端路由重定向，404跳转等都是通过context作为判断来实现的。
css渲染
在具有样式的组件需要通过生命周期钩子注入css，让服务器端获取到并且渲染出来，这里就是一个应用（context作为数据桥梁）
组件的loadData（方法名称自己定义）
sagas就是store目录下的sagas
node作为中间层
所有的ajax请求都是通过node作为中间层来转发，这里使用了
axios对象的createInstance方法
服务器端使用的axios实例和浏览器端使用的axios实例不一样，作为参数传递给sagas，这里需要注意传参的方式：
服务器端使用：
客户端使用：
之所以能够这样做是因为watch sagas都是在浏览器端调用的（比如通过生命周期钩子，或者点击事件等），而loadData是服务器端调用获取数据用来填充store的。
造轮子？
虽然有了next.js，但有时自己造轮子有时是需要的。当然next.js是非常受欢迎的，值得用来开发实际的项目
结尾
再次感谢DellLee老师的课程。花了2周的时间，完成了一个react-ssr项目架构，项目里面还有2个未解决的问题，一个是css在服务器和客户端都渲染了一次，另外一个就是code splitting或按需加载的问题。希望在后续的学习过程中能够解决遗留的问题。如果你解决，请留言告诉我！