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

BigLT Aizu 2019

Transcript

1. 1
   Confidential - Do Not Share
   SSR と CSR の狭間で
   〜ハイパフォーマンス Web サービスを夢見るフロントエンドエンジニアの闘い〜
   bigLT 2019 aizu / June 29, 2019.
   @karszawa
   

   View Slide

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
   

   View Slide

3. 3
   Confidential - Do Not Share
   今日話すこと
   2019年にWebサービスを開発する上で
   まずはじめに考えないといけない
   パフォーマンスのこと
   

   View Slide

4. 4
   Confidential - Do Not Share
   今日話すこと
   But about
   Architecture
   Not about
   Libraries
   SSR, CSR, or others
   React, Vue, Angular...
   

   View Slide

5. 5
   Confidential - Do Not Share
   今日話すこと
   1. Web技術の変化とパフォーマンス改善の歴史
   2. CSR / SSR ↔ Client / Server Side Rendering
   3. 今年、一押しの技術
   4. まとめ
   

   View Slide

6. 6
   Confidential - Do Not Share
   Web技術の変化とパフォーマンス改善の歴史
   Keywords: Front-end libraries, Performance issues, HTTP Archive
   

   View Slide

7. 7
   Confidential - Do Not Share
   Web Front-end の歴史は巨大化と抑制の繰り返し
   2006 2010 2015 2019
   jQuery Backbone.js, AngularJS React, Redux TypeScript, TDD
   動的なサイトが
   簡単に作れる！
   「現在の状態」が
   管理できる！
   状態の「更新」がき
   れいに書ける！
   巨大なコードベー
   スでも見通しが良く
   なる！
   

   View Slide

8. 8
   Confidential - Do Not Share
   HTTP Archive
   データ転送量の中央値はPCで4倍、モバイルで7倍！
   

   View Slide

9. 9
   Confidential - Do Not Share
   まとめ
   パフォーマンスを保ちつつ立派なアプリケーションを提供しなければ行けないという
   のが今日の Web エンジニアの課題
   

   View Slide

10. 10
    Confidential - Do Not Share
    Client / Server Side Rendering
    Keywords: Front-end libraries, Performance issues, HTTP Archive
    

    View Slide

11. 11
    Confidential - Do Not Share
    CSR: Client Side Rendering
    ● 2014 年ぐらいからのトレンド 「今年、一押しの技術」まであと
    5年…！
    ● 問題① React ライブラリが通信容量を圧迫する
    ● 問題② React の実行はパフォーマンスの問題を起こす
    React などの vDOM ライブラリで HTML をクライアントで動的に生成
    

    View Slide

12. 12
    Confidential - Do Not Share
    SSR: Server Side Rendering
    サーバーで動かせば良いよね → SSR: Server Side Rendering
    ● サーバーのリソースはお金や工夫で解決できる
    ● HTML だけ送信すればリソース送信量も減少する（こともある）
    「SSR と CSR の中間的な方策はたくさんある」
    今日は3つの既存手法と今年イチオシの手法を紹介する
    React のレンダリングはサーバーサイドでもできる
    

    View Slide

13. 13
    Confidential - Do Not Share
    ブラウザでのパフォーマンスを測るメトリクスについて
    TTFB (Time to First Byte) → 最初のリクエストを帰ってくるまで
    FP (First Paint) → 最初の描画が発生するまで
    FCP (First Contentful Paint) → メインコンテンツが描画されるまで
    TTI (Time to Interactive) → ユーザー操作を受け付けるまで
    ページが表示される段階ごとにいろいろな指標（メトリクス）がある
    

    View Slide

14. 14
    Confidential - Do Not Share
    Static SSR
    ● サーバーの責務は 静的ファイルの送信 だけ
    ● サーバーは置いてあるコードを返すだけなので FCP は最速
    ● JS がないので当然 TTI は最速
    ● すべてのページをデプロイのたびに作り直さないといけないので
    コンテンツが限定的でないと使えない
    デプロイ時に HTML/CSS をビルドしてリソースを静的配信する
    

    View Slide

15. 15
    Confidential - Do Not Share
    CSR with Pre-rendering
    ● サーバーの責務は 静的ファイル の送信だけ
    ● 速い FP
    ● 遅い FCP & TTI
    App Shell だけをプリレンダリングして、ユーザー固有部分は CSR
    

    View Slide

16. 16
    Confidential - Do Not Share
    SSR with Hydration
    ● サーバーでは HTML 作成のため
    ● クライアントではイベントハンドラの登録のため
    Pros/Cons
    ● 速い FCP
    ● 遅い TTI → 見えてるのに反応しない → 不気味の谷
    サーバーとクライアントで2度レンダリングを行う
    

    View Slide

17. 17
    Confidential - Do Not Share
    今年、一押しの技術
    Keywords: Progressive Hydration
    

    View Slide

18. 18
    Confidential - Do Not Share
    Streaming SSR
    ● 最速の FP 速い FCP
    ● 不気味の谷はバレにくくなったがデータ転送量はむしろ増加
    HTML をチャンクに分割して送信し徐々にレンダリングする
    

    View Slide

19. 19
    Confidential - Do Not Share
    Progressive Hydration
    ● ビューポートに入った要素だけ処理をダウンロードして実行する
    ○ 現在は IntersectionObserver と dynamic import を用いて
    Hacky な実装ができる
    ○ 今年中には React が標準対応しそう
    ● TTI の減少
    ● データ送信量の絶対量が減少
    見えてる要素だけ Hydration （イベントハンドラの登録）を行う
    

    View Slide

20. 20
    Confidential - Do Not Share
    まとめ
    

    View Slide

21. 21
    Confidential - Do Not Share
    それぞれの方法に長所・短所がある
    サービスごとに適切な方法を選ぼう
    

    View Slide

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
    

    View Slide

23. 23
    Confidential - Do Not Share
    Thank you!
    About Mercari
    About me
    新卒採用中！
    通年インターン募集中！
    @karszawa
    

    View Slide