SSRとCSRの狭間で〜ハイパフォーマンスWebサービスを夢見るフロントエンドエンジニアの闘い〜

BigLT Aizu 2019

Transcript

1. 1 Confidential - Do Not Share SSR と CSR の狭間で 〜ハイパフォーマンス Web サービスを夢見るフロントエンドエンジニアの闘い〜 bigLT 2019 aizu / June 29, 2019. @karszawa
2. 2 Confidential - Do Not Share Web Front-end Engineer Joined Mercari as newgrads in April 2019. Twitter @karszawa React / TypeScript / vscode / Chrome Hiroaki KARASAWA
3. 3 Confidential - Do Not Share 今日話すこと 2019年にWebサービスを開発する上で まずはじめに考えないといけない パフォーマンスのこと
4. 4 Confidential - Do Not Share 今日話すこと But about Architecture Not about Libraries SSR, CSR, or others React, Vue, Angular...
5. 5 Confidential - Do Not Share 今日話すこと 1. Web技術の変化とパフォーマンス改善の歴史 2. CSR / SSR ↔ Client / Server Side Rendering 3. 今年、一押しの技術 4. まとめ
6. 6 Confidential - Do Not Share Web技術の変化とパフォーマンス改善の歴史 Keywords: Front-end libraries, Performance issues, HTTP Archive
7. 7 Confidential - Do Not Share Web Front-end の歴史は巨大化と抑制の繰り返し 2006 2010 2015 2019 jQuery Backbone.js, AngularJS React, Redux TypeScript, TDD 動的なサイトが 簡単に作れる！ 「現在の状態」が 管理できる！ 状態の「更新」がき れいに書ける！ 巨大なコードベー スでも見通しが良く なる！
8. 8 Confidential - Do Not Share HTTP Archive データ転送量の中央値はPCで4倍、モバイルで7倍！
9. 9 Confidential - Do Not Share まとめ パフォーマンスを保ちつつ立派なアプリケーションを提供しなければ行けないという のが今日の Web エンジニアの課題
10. 10 Confidential - Do Not Share Client / Server Side Rendering Keywords: Front-end libraries, Performance issues, HTTP Archive
11. 11 Confidential - Do Not Share CSR: Client Side Rendering • 2014 年ぐらいからのトレンド 「今年、一押しの技術」まであと 5年…！ • 問題① React ライブラリが通信容量を圧迫する • 問題② React の実行はパフォーマンスの問題を起こす React などの vDOM ライブラリで HTML をクライアントで動的に生成
12. 12 Confidential - Do Not Share SSR: Server Side Rendering サーバーで動かせば良いよね → SSR: Server Side Rendering • サーバーのリソースはお金や工夫で解決できる • HTML だけ送信すればリソース送信量も減少する（こともある） 「SSR と CSR の中間的な方策はたくさんある」 今日は3つの既存手法と今年イチオシの手法を紹介する React のレンダリングはサーバーサイドでもできる
13. 13 Confidential - Do Not Share ブラウザでのパフォーマンスを測るメトリクスについて TTFB (Time to First Byte) → 最初のリクエストを帰ってくるまで FP (First Paint) → 最初の描画が発生するまで FCP (First Contentful Paint) → メインコンテンツが描画されるまで TTI (Time to Interactive) → ユーザー操作を受け付けるまで ページが表示される段階ごとにいろいろな指標（メトリクス）がある
14. 14 Confidential - Do Not Share Static SSR • サーバーの責務は 静的ファイルの送信 だけ • サーバーは置いてあるコードを返すだけなので FCP は最速 • JS がないので当然 TTI は最速 • すべてのページをデプロイのたびに作り直さないといけないので コンテンツが限定的でないと使えない デプロイ時に HTML/CSS をビルドしてリソースを静的配信する
15. 15 Confidential - Do Not Share CSR with Pre-rendering • サーバーの責務は 静的ファイル の送信だけ • 速い FP • 遅い FCP & TTI App Shell だけをプリレンダリングして、ユーザー固有部分は CSR
16. 16 Confidential - Do Not Share SSR with Hydration • サーバーでは HTML 作成のため • クライアントではイベントハンドラの登録のため Pros/Cons • 速い FCP • 遅い TTI → 見えてるのに反応しない → 不気味の谷 サーバーとクライアントで2度レンダリングを行う
17. 17 Confidential - Do Not Share 今年、一押しの技術 Keywords: Progressive Hydration
18. 18 Confidential - Do Not Share Streaming SSR • 最速の FP 速い FCP • 不気味の谷はバレにくくなったがデータ転送量はむしろ増加 HTML をチャンクに分割して送信し徐々にレンダリングする
19. 19 Confidential - Do Not Share Progressive Hydration • ビューポートに入った要素だけ処理をダウンロードして実行する ◦ 現在は IntersectionObserver と dynamic import を用いて Hacky な実装ができる ◦ 今年中には React が標準対応しそう • TTI の減少 • データ送信量の絶対量が減少 見えてる要素だけ Hydration （イベントハンドラの登録）を行う
20. 20 Confidential - Do Not Share まとめ
21. 21 Confidential - Do Not Share それぞれの方法に長所・短所がある サービスごとに適切な方法を選ぼう
22. 22 Confidential - Do Not Share 画像をはめた説明のときに使用してください。 ここにタイトルをいれる Rendering on the Web | Web | Google Developers https://developers.google.com/web/updates/2019/02/rendering-on-the-web
23. 23 Confidential - Do Not Share Thank you! About Mercari About me 新卒採用中！ 通年インターン募集中！ @karszawa