質問: 最近からReactを学び始めているものです。 サーバーサイドレンダリング(SSR)の概要的なものについて、自分で考えてみたのですが、こういうものなのかと言うのが不明で質問に至りました。 SSRの流れ (webサーバー側はMVCのフレームワークを使っている事を想定) ※ws=webサーバー, bs=Browser 0, bs側からリクエスト 1, ws側でContoroller→View作成 2, 1で作成されたViewを更にReact.jsでレンダリング 3, 2で作成されたView(html)をbs側にレスポンス 4, bsでhtmlを表示 つまり、サーバーサイドから造られたViewをサーバーサイドからjsを走らせて新たなViewを作成するという事でしょうか? 上記の2でReact.js等をレンダリングさせる際にはnode.js等のサーバーを立てて実行させるのでしょうか? それは、具体的にどのように繋ぎ込めばいいのかいまいち想像が行きません、、 また、サーバーサイドレンダリングにする一番のメリットとしては、出来上がったHTMLを読み込ませるだけなので、クライアント側でのjsの読み込みを気にせずに済むというところでしょうか? クライアントに完全に任せてしまうと、やはりSEO等の観点でデメリットが生じる事が大きいのでしょうか? 以上、もう少し深く学習を進めていけば解決できると思うのですが、どうしても気になって引っかかるので、ご教授頂ければ幸いです。
回答: > > node.js等のサーバーを立てて実行させる > > > 基本的にその通りです。うちでは,過去の資産からjs用のサーバと静的なページを作るサーバを分けて作ったりしています。一つにまとめてNode.jsのみで運用することも可能です。webpackのおかげで,Node.jsの資産は別言語で作成したWebサービスに適応させることが昔ほど難しくなくなりました。 > > サーバーサイドからjsを走らせて新たなViewを作成する > > > その通りですが,現在主流なのがNode.jsなだけでこの処理自体はjsに限ったものではないです。特にReactに使われているアルゴリズムはJavascriptに限らず幅広く適用できるものですので,今後色々な言語で取り入れられていく可能性はあります。一度作成したhtmlを再度解析に掛けてレンダリングすることはできますが,二つの言語でhtmlのレンダリングを走らせるのは無駄が多いので,基本的には一つに統合するか片方の言語は(言語自体の性能差はひとまず置いておくとして)templateを出力するだけに使った方が良いです。 > > サーバーサイドレンダリングにする一番のメリット > > > 以下の記事がとても詳しいです。要点だけ絞ると,クライアント側に送信するjavascriptファイルを軽くできるので負荷が少なくなり,ユーザ利用のパフォーマンスが上がるのと,静的なページを吐き出すのでSEO観点からメリットが得られます。 Angular2のServer Side Renderingに触れてみる > > クライアントに完全に任せてしまうと、SEO等の観点でデメリットが生じる > > > その通りです。サーバサイドレンダリングを行うことで,このデメリットを軽減できます。