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

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