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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20 Confidential - Do Not Share まとめ 

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

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 Confidential - Do Not Share Thank you! About Mercari About me 新卒採用中！ 通年インターン募集中！ @karszawa