react系(別言語含む)の サーバーサイドレンダリング について考えよう
TRANSCRIPT
![Page 1: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/1.jpg)
React系(別言語含む)のサーバーサイドレンダリング
について考えよう
SPAとSSR、現実解について考えてみる
2016/10/07Okachi.js vol.0
![Page 2: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/2.jpg)
登壇者
{:company “Greative.GK” :name “Kazuhiro Hara” :twitter “@kara_d” :interest “SPA, WebVR, Clojure, Design research”}
![Page 3: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/3.jpg)
Clojure / ClojureScript でElectronアプリケーションを
作るためのスターターキット / プラットホーム
● オープンソースにてGitHubにて公開
● MITライセンス
● 現在のスター数 : 230 http://descjop.org/
![Page 4: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/4.jpg)
先週、こんな発表をしました
http://www.slideshare.net/karadweb/clojure-react
![Page 5: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/5.jpg)
React系のサーバーサイドレンダリングについて
● そもそもサーバーサイドレンダリングって何さ?○ というかSPAって何?○ 以下SSRとだけ書きます
● SSRどこが使っているか?● SSRやってみたことある?
○ システム構成図、従来のWebアプリとの違い
○ Node.jsをサーバにしないケースのパターンについて
● SSRのアリ、ナシ、メリットデメリット、コスト感、難しそうな部分
● SSRが有効なサイト、あまりよくないサイト
![Page 6: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/6.jpg)
SPAとSSRって何?話
![Page 7: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/7.jpg)
SPAについて
● シングルページWebアプリケーション(SPA)は、
最近注目を集めているWebアプリケーションのアーキテクチャです。
SPAは、ユーザがアプリケーションを使っている間、 Webページ全体をロードすることがなく、
レスポンスが高速でUI/UXに優れているという利点を持っています。
かつてはJavaアプレットやFlashといったWebブラウザのプラグインに依存する必要がありましたが、
近年ではJavaScriptを使ったSPAが現実的になってきています。
http://www.oreilly.co.jp/books/9784873116730/
![Page 9: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/9.jpg)
SSR(サーバーサイドレンダリング)について
(Reactベースのアプリケーションの文脈で)
● Webアプリケーションに用意されているURLにアクセスした時に、
DOMの構築をフロントエンド側で行うと、一瞬表示されていない状態になる
● 初期表示状態が決まっているなら、
サーバー側で初期状態のDOMレンダリングを完了した状態で返せばいい
● 共通の半描画状態の画面を出したりローディング画像を出すアプローチもある
![Page 10: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/10.jpg)
なぜSSRなのか?について
● URLに対する情報のアクセシビリティ・セマンティック性を確保しておく○ ブラウザを通したURLに対するアクセシビリティ・セマンティック性とは少し別
○ SEOの問題はあまり心配しなくていいらしい (自分で実験したわけではない )
● パフォーマンスの問題○ ブラウザでURLを直接アクセスした時に表示が完了するまでの時間の短縮化
![Page 11: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/11.jpg)
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>
![Page 12: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/12.jpg)
アーキテクチャの違い(ざっくり)従来のWebApp
APIベースのWebApp
SSR込みのWebApp
WebApp&
ViewBrowserHTML
WebApp&
JSON&
layout
Browser
Base HTML
JSON
WebApp&
ViewBrowserHTML
WebApp&
JSON&
layout
BrowserJSON
URLアクセス時
URLアクセス時
URLアクセス時
画面遷移時
![Page 13: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/13.jpg)
そもそもSSRする必要があるのか?ある
ない
Reactで複雑な状態遷移を扱うようなことが前提のWebアプリケーションなら、
Accessible Rich Internet Applications(WEI-ARIA)を全力で頑張る方向に
倒したほうが良くないか?
☞
![Page 14: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/14.jpg)
なぜ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と違うエコシステム、違うテンプレートスタイル
![Page 15: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/15.jpg)
Java系での実装方法
大きく分けて2種類
● 独自にReactのdomを再実装
● Javaのnashornを利用
● 別の道... Node.jsサーバーを立てる
![Page 16: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/16.jpg)
SSRどこ使話
![Page 18: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/18.jpg)
SSR採用サイト
Netflix
https://www.netflix.com/jp/
![Page 19: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/19.jpg)
SSR使っていない例
https://www.instagram.com/
![Page 20: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/20.jpg)
その他、SSR使っているところ
知ってたら教えてください!(ここに書きます)
![Page 21: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/21.jpg)
SSRやってみたことある話
![Page 22: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/22.jpg)
SSRやってみた方
● どんなやり方で?● どういうタイプのサイトで?
![Page 23: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/23.jpg)
原の場合(要参照)
http://www.slideshare.net/karadweb/clojure-react
![Page 24: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/24.jpg)
SSRのアリ、ナシ、メリットデメリット、
コスト感、難しそうな部分
![Page 25: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/25.jpg)
アリ、ナシ、メリットデメリット、コスト感、難しそう?● みんなで考えてみましょう
HTML CSS Client / JSServer / JSServer / TmplServer / CtrlServer / Model
![Page 26: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/26.jpg)
SSRどこで活きるのか
![Page 27: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/27.jpg)
SSRが有効なサイト、あまりよくないサイトまとめ
● みんなで考えてみましょう
![Page 28: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/28.jpg)
Okachi.js 第1回目の予定
2016/11/18Okachi.js vol.1
![Page 29: React系(別言語含む)の サーバーサイドレンダリング について考えよう](https://reader031.vdocuments.net/reader031/viewer/2022022203/58742ebe1a28ab72188b725b/html5/thumbnails/29.jpg)
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