SPAとSSR、現実解について考えてみる Okachi.jsでの発表資料です

1. React系(別言語含む)の
サーバーサイドレンダリング
について考えよう
SPAとSSR、現実解について考えてみる
2016/10/07
Okachi.js vol.0

2. 登壇者
{:company “Greative.GK”
:name “Kazuhiro Hara”
:twitter “@kara_d”
:interest “SPA, WebVR, Clojure,
Design research”}

3. Clojure / ClojureScript でElectronアプリケーションを
作るためのスターターキット / プラットホーム
● オープンソースにてGitHubにて公開
● MITライセンス
● 現在のスター数 : 230 http://descjop.org/

4. 先週、こんな発表をしました
http://www.slideshare.net/karadweb/clojure-react

5. React系のサーバーサイドレンダリングについて
● そもそもサーバーサイドレンダリングって何さ?
○ というかSPAって何?
○ 以下SSRとだけ書きます
● SSRどこが使っているか?
● SSRやってみたことある?
○ システム構成図、従来の Webアプリとの違い
○ Node.jsをサーバにしないケースのパターンについて
● SSRのアリ、ナシ、メリットデメリット、コスト感、難しそうな部分
● SSRが有効なサイト、あまりよくないサイト

6. SPAとSSR
って何?話

7. SPAについて
● シングルページWebアプリケーション（SPA）は、
最近注目を集めている Webアプリケーションのアーキテクチャです。
SPAは、ユーザがアプリケーションを使っている間、 Webページ全体をロードすることがなく、
レスポンスが高速で UI/UXに優れているという利点を持っています。
かつてはJavaアプレットやFlashといったWebブラウザのプラグインに依存する必要がありましたが、
近年ではJavaScriptを使ったSPAが現実的になってきています。
http://www.oreilly.co.jp/books/9784873116730/

8. SPAの例
Pintarest
https://jp.pinterest.com/

9. SSR(サーバーサイドレンダリング)について
(Reactベースのアプリケーションの文脈で)
● Webアプリケーションに用意されているURLにアクセスした時に、
DOMの構築をフロントエンド側で行うと、一瞬表示されていない状態になる
● 初期表示状態が決まっているなら、
サーバー側で初期状態のDOMレンダリングを完了した状態で返せばいい
● 共通の半描画状態の画面を出したりローディング画像を出すアプローチもある

10. なぜSSRなのか?について
● URLに対する情報のアクセシビリティ・セマンティック性を確保しておく
○ ブラウザを通したURLに対するアクセシビリティ・セマンティック性とは少し別
○ SEOの問題はあまり心配しなくていいらしい (自分で実験したわけではない )
● パフォーマンスの問題
○ ブラウザでURLを直接アクセスした時に表示が完了するまでの時間の短縮化

11. 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>

12. アーキテクチャの違い(ざっくり)
従来のWebApp
APIベースのWebApp
SSR込みのWebApp
WebApp
&
View
BrowserHTML
WebApp
&
JSON
&
layout
Browser
Base HTML
JSON
WebApp
&
View
BrowserHTML
WebApp
&
JSON
&
layout
BrowserJSON
URLアクセス時
URLアクセス時
URLアクセス時
画面遷移時

13. そもそもSSRする必要があるのか?
ある
ない
Reactで複雑な状態遷移を扱うようなことが前提のWebアプリケーションなら、
Accessible Rich Internet Applications(WEI-ARIA)を全力で頑張る方向に
倒したほうが良くないか?
☞

14. なぜ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と違うエコシステム、違うテンプレートスタイル

15. Java系での実装方法
大きく分けて2種類
● 独自にReactのdomを再実装
● Javaのnashornを利用
● 別の道... Node.jsサーバーを立てる

16. SSRどこ使話

17. SSR採用サイト
IDEO
https://www.ideo.com/jp/

18. SSR採用サイト
Netflix
https://www.netflix.com/jp/

19. SSR使っていない例
Instagram
https://www.instagram.com/

20. その他、SSR使っているところ
知ってたら教えてください!(ここに書きます)

21. SSRやってみたことある話

22. SSRやってみた方
● どんなやり方で?
● どういうタイプのサイトで?

23. 原の場合(要参照)
http://www.slideshare.net/karadweb/clojure-react

24. SSRのアリ、ナシ、
メリットデメリット、
コスト感、難しそうな部分

25. アリ、ナシ、メリットデメリット、コスト感、難しそう?
● みんなで考えてみましょう
HTML CSS Client / JSServer / JSServer / TmplServer / CtrlServer / Model

26. SSRどこで活きるのか

27. SSRが有効なサイト、あまりよくないサイトまとめ
● みんなで考えてみましょう

28. Okachi.js 第1回目の予定
2016/11/18
Okachi.js vol.1

29. 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