Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SSRとCSRの狭間で〜ハイパフォーマンスWebサービスを夢見るフロントエンドエンジニアの闘い〜
Search
Hiroaki KARASAWA
June 29, 2019
Technology
0
220
SSRとCSRの狭間で〜ハイパフォーマンスWebサービスを夢見るフロントエンドエンジニアの闘い〜
BigLT Aizu 2019
Hiroaki KARASAWA
June 29, 2019
Tweet
Share
More Decks by Hiroaki KARASAWA
See All by Hiroaki KARASAWA
Google Cloud のモニタリング製品を徹底活用してみた
karszawa
0
12
ダウンタイム 30 秒で AlloyDB に移行した話
karszawa
0
23
DMS で AlloyDB に簡単移行!
karszawa
0
5
【現場の本音】App Engine から Cloud Run に移行してみた
karszawa
0
74
cls-hooked による実行コンテキストの保存と利用
karszawa
0
510
Hasura の Relationship と権限管理
karszawa
0
630
React Native + Expo のバージョンアップと互換性の維持に関する運用と絶技
karszawa
0
600
ダイニーにおけるモニタリングと振り返りの仕組み
karszawa
1
180
ダイニーにおける本番 Hasura 運用
karszawa
0
1.4k
Other Decks in Technology
See All in Technology
Shinagile 2024
kawaguti
PRO
2
120
生成AIがもたらす変革 / GitHubGalaxy_CyberAgent
cyberagentdevelopers
PRO
2
110
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
.NET GraphQL Client のリアル
sansantech
PRO
1
250
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
Taking Flight with Tailwind CSS
opdavies
0
4.3k
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
770
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
11
3.2k
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
390
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Facilitating Awesome Meetings
lara
43
5.6k
Practical Orchestrator
shlominoach
183
9.8k
For a Future-Friendly Web
brad_frost
172
9k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Building Applications with DynamoDB
mza
88
5.7k
A designer walks into a library…
pauljervisheath
201
23k
Transcript
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