react-railsでサーバーサイドレンダリング!
といった記事をよく見かけるのですが、
サーバーサイドレンダリングとはつまりどういうことですか?
ルーティングをRailsが受け持つということかなと思ったんですけど、どうでしょうか。
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

回答1件
0
ベストアンサー
Hassanさんご自身が質問欄に掲載されたリンク先で紹介されている下記ページの説明が分かりやすいのではないかと思いますが、既にご確認済みでしたか?
[なぜ仮想DOMという概念が俺達の魂を震えさせるのか](http://qiita.com/mizchi/items/4d25bc26def1719d52e6)
WWW (World Wide Web) システムで表示されるページは、一般的には画面がHTML等で構成されています。
ボタンクリックなどによりページを更新する場合、たとえそれが一文字のみの変更であっても、サーバ側で生成された 1ページ分のHTML を再度受信してレンダリングし直す(画面遷移する)というのが本来の仕組みでした。
しかし、画面デザインの高度化に伴いページを構成するデータ量が膨大になってしまったため、毎回ページ全量のデータを転送していてはあまりにも遅いので、変更の必要な部分のみ を差し替えるという技術が使われるようになりました。
HTMLはツリー構造なので、該当箇所を特定できれば JavaScript等で部分的に差し替えることができます。もっとも、全てを自力で実装すると大変なので、最近では jQuery のようなライブラリを使用するのが一般的です。
とはいえ、この方式では jQuery を使ったとしても、変更前後のHTMLの差分を人間が予め準備して、ロジックの中にHTMLのパッチ処理を埋め込んで行く必要があります。また、時系列で刻々と変化してゆくHTMLのパッチを生成しなければならないだけでなく、複雑なロジックをプレゼンテーション層側に実装する必要が生じるために従来の設計手法がそのまま適用できず、ロジックが複雑な場合には設計もテストも非常に難しいです。つまり、速度のために設計を犠牲にしている事になります。
そこで 仮想DOM の登場です。
このHTMLの生成する元となるツリー構造は、生のDOM(HTMLのインスタンス)である必要はなく、DOMと1対1に対応する単純な構造体で表現し、それを仮想DOMと呼びます。
単純なJSの構造体なので、基本的に仮想DOM実装はブラウザ環境である必要がなく、node.jsやピュアなV8でも仮想DOMの構築とdiff生成までは可能です。
そうです、サーバーサイドで、HTTPリクエストに応えてHTMLを返却する操作そのものです。
Virtual DOMに基づいたフレームワークを使えば、この「古くて新しい考え方」でアプリケーションを記述することが可能になるのです。多くのサーバーサイドエンジニアが慣れ親しんだそれです。しかも、パフォーマンスは最適化された上でね!
これが最初に述べた、「設計と速度が両立する」という言葉の意味するところです。
以上を簡単にまとめると、サーバーサイドレンダリング とは、近年、高速化のためにjQuery等を使用してフロントサイドで実施していた HTMLの構築 を、仮想DOM というフレームワークを用いることで再び サーバーサイドで実施 することで、「設計と速度を両立」させる手法ということができると思います。
少し別の角度で説明すると…
サーバーサイドで、いわゆる MVC モデルで構築する際に、従来は Rails の規約優先のポリシーに則ることで設計・実装を容易にするというアプローチが取られて来ました。
それが近年では高速化のために、View の機能の大部分を jQuery等を利用してフロントサイドで実装する方式が注目されていました。
しかし、設計やテストの困難という新たな壁を克服するための新たなアプローチとして、React.js というライブラリを用い Viewの部分を仮想DOMを利用してComponent化 することで、高速性を維持したまま従来の設計手法を適用できるようにする方式が大きな注目を集めているということだと思います。
よかったら、下記ページもご参考になさってください。
[React.jsとは](http://qiita.com/koba04/items/4d13caf5ab4507974bf0)
投稿2015/12/12 11:21
総合スコア5936
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。