Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

BigLT Aizu 2019

Hiroaki KARASAWA

June 29, 2019
Tweet

More Decks by Hiroaki KARASAWA

Other Decks in Technology

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