質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3195閲覧

React.jsのサーバーサイドレンダリング(SSR)について

gattsu

総合スコア11

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

1クリップ

投稿2016/11/14 07:30

最近から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等の観点でデメリットが生じる事が大きいのでしょうか?

以上、もう少し深く学習を進めていけば解決できると思うのですが、どうしても気になって引っかかるので、ご教授頂ければ幸いです。

maisumakun👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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等の観点でデメリットが生じる

その通りです。サーバサイドレンダリングを行うことで,このデメリットを軽減できます。

投稿2016/11/15 01:31

編集2016/11/15 01:48
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gattsu

2016/11/18 13:56

分かりやすい回答ありがとうございました。 SSRの概念がかなりよくわかって来ました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問