react系(別言語含む)の サーバーサイドレンダリング について考えよう
TRANSCRIPT
React系(別言語含む)のサーバーサイドレンダリング
について考えよう
SPAとSSR、現実解について考えてみる
2016/10/07Okachi.js vol.0
登壇者
{:company “Greative.GK” :name “Kazuhiro Hara” :twitter “@kara_d” :interest “SPA, WebVR, Clojure, Design research”}
Clojure / ClojureScript でElectronアプリケーションを
作るためのスターターキット / プラットホーム
● オープンソースにてGitHubにて公開
● MITライセンス
● 現在のスター数 : 230 http://descjop.org/
先週、こんな発表をしました
http://www.slideshare.net/karadweb/clojure-react
React系のサーバーサイドレンダリングについて
● そもそもサーバーサイドレンダリングって何さ?○ というかSPAって何?○ 以下SSRとだけ書きます
● SSRどこが使っているか?● SSRやってみたことある?
○ システム構成図、従来のWebアプリとの違い
○ Node.jsをサーバにしないケースのパターンについて
● SSRのアリ、ナシ、メリットデメリット、コスト感、難しそうな部分
● SSRが有効なサイト、あまりよくないサイト
SPAとSSRって何?話
SPAについて
● シングルページWebアプリケーション（SPA）は、
最近注目を集めているWebアプリケーションのアーキテクチャです。
SPAは、ユーザがアプリケーションを使っている間、 Webページ全体をロードすることがなく、
レスポンスが高速でUI/UXに優れているという利点を持っています。
かつてはJavaアプレットやFlashといったWebブラウザのプラグインに依存する必要がありましたが、
近年ではJavaScriptを使ったSPAが現実的になってきています。
http://www.oreilly.co.jp/books/9784873116730/
SSR(サーバーサイドレンダリング)について
(Reactベースのアプリケーションの文脈で)
● Webアプリケーションに用意されているURLにアクセスした時に、
DOMの構築をフロントエンド側で行うと、一瞬表示されていない状態になる
● 初期表示状態が決まっているなら、
サーバー側で初期状態のDOMレンダリングを完了した状態で返せばいい
● 共通の半描画状態の画面を出したりローディング画像を出すアプローチもある
なぜSSRなのか?について
● URLに対する情報のアクセシビリティ・セマンティック性を確保しておく○ ブラウザを通したURLに対するアクセシビリティ・セマンティック性とは少し別
○ SEOの問題はあまり心配しなくていいらしい (自分で実験したわけではない )
● パフォーマンスの問題○ ブラウザでURLを直接アクセスした時に表示が完了するまでの時間の短縮化
SSRと一口に言っても?● React標準のスタイルでサポートされているやり方
○ react-dom/serverを使う
■ https://facebook.github.io/react/docs/environments.html● 上記と同じことを他言語環境でエミュレートする
● せめてJSON部分だけHTMLに埋め込む
○ TwitterやFacebookなど
● 原始的に出力するdivを切り分けて読み込み後は元のdivを消すとか...
<div id=”ssr”>ここにサーバーで出力した結果を埋め込む </div><div id=”react-app”>ここはReactが使う</div>
アーキテクチャの違い(ざっくり)従来のWebApp
APIベースのWebApp
SSR込みのWebApp
WebApp&
ViewBrowserHTML
WebApp&
JSON&
layout
Browser
Base HTML
JSON
WebApp&
ViewBrowserHTML
WebApp&
JSON&
layout
BrowserJSON
URLアクセス時
URLアクセス時
URLアクセス時
画面遷移時
そもそもSSRする必要があるのか?ある
ない
Reactで複雑な状態遷移を扱うようなことが前提のWebアプリケーションなら、
Accessible Rich Internet Applications(WEI-ARIA)を全力で頑張る方向に
倒したほうが良くないか?
☞
なぜn言語(JavaScript以外)でのSSRは難しいか
n言語に限らず難しい問題(react-rails, React.NET, react-python, react-php-v8jsなど
は公式に出ている...)
● Reactのレンダリングは、同一のものをHTMLに埋め込んで返せばいい訳ではない○ data-reactidの指定と、data-react-checksumの指定が必要
○ data-reactidを埋め込んだHTMLに対してadler32でチェックサムを作成
○ ただ、0.14.0 -> 15.0で少し変更があった (data-reactidベースからdata-reactrootベースへ)
■ https://facebook.github.io/react/blog/2016/04/07/react-v15.html
● Reactと違うエコシステム、違うテンプレートスタイル
Java系での実装方法
大きく分けて2種類
● 独自にReactのdomを再実装
● Javaのnashornを利用
● 別の道... Node.jsサーバーを立てる
SSRどこ使話
SSR採用サイト
Netflix
https://www.netflix.com/jp/
SSR使っていない例
https://www.instagram.com/
その他、SSR使っているところ
知ってたら教えてください!(ここに書きます)
SSRやってみたことある話
SSRやってみた方
● どんなやり方で?● どういうタイプのサイトで?
原の場合(要参照)
http://www.slideshare.net/karadweb/clojure-react
SSRのアリ、ナシ、メリットデメリット、
コスト感、難しそうな部分
アリ、ナシ、メリットデメリット、コスト感、難しそう?● みんなで考えてみましょう
HTML CSS Client / JSServer / JSServer / TmplServer / CtrlServer / Model
SSRどこで活きるのか
SSRが有効なサイト、あまりよくないサイトまとめ
● みんなで考えてみましょう
Okachi.js 第1回目の予定
2016/11/18Okachi.js vol.1
Okachi.js vol.1 なにやる?● React Nativeアプリ -> [日野さん]● Electron● ハイブリッドiPhone & Android● Web VR -> [原話す、ちょっとだけ]● npmパッケージマネージャー(橋本氏ライブラリリリース)● Virtual Domコード・リーディング
● SPA(WAI-ARIA) -> []● Swift(?) -> Okachi.swiftにて
● Angular JS 2.0● Node Red -> [永井さん、ちょっとだけ]● Plone のフロントエンド -> [寺田さん]● サーバーレス系 : firebase● プログレッシブWebアプリ
● HTTP2● Service Worker