React系(別言語含む)の サーバーサイドレンダリング について考えよう
3 likes7,855 views
SPAとSSR、現実解について考えてみる Okachi.jsでの発表資料です
![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](https://image.slidesharecdn.com/okachi-161008032532/85/React-29-320.jpg)
React系(別言語含む)の サーバーサイドレンダリング について考えよう
- 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/
- 5. React系のサーバーサイドレンダリングについて ● そもそもサーバーサイドレンダリングって何さ? ○ というかSPAって何? ○ 以下SSRとだけ書きます ● SSRどこが使っているか? ● SSRやってみたことある? ○ システム構成図、従来の Webアプリとの違い ○ Node.jsをサーバにしないケースのパターンについて ● SSRのアリ、ナシ、メリットデメリット、コスト感、難しそうな部分 ● SSRが有効なサイト、あまりよくないサイト
- 7. SPAについて ● シングルページWebアプリケーション（SPA）は、 最近注目を集めている Webアプリケーションのアーキテクチャです。 SPAは、ユーザがアプリケーションを使っている間、 Webページ全体をロードすることがなく、 レスポンスが高速で UI/UXに優れているという利点を持っています。 かつてはJavaアプレットやFlashといったWebブラウザのプラグインに依存する必要がありましたが、 近年ではJavaScriptを使ったSPAが現実的になってきています。 http://www.oreilly.co.jp/books/9784873116730/
- 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>
- 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どこ使話
- 21. SSRやってみたことある話
- 25. アリ、ナシ、メリットデメリット、コスト感、難しそう? ● みんなで考えてみましょう HTML CSS Client / JSServer / JSServer / TmplServer / CtrlServer / Model
- 26. SSRどこで活きるのか
- 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