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
350
SSRとCSRの狭間で〜ハイパフォーマンスWebサービスを夢見るフロントエンドエンジニアの闘い〜
BigLT Aizu 2019
Hiroaki KARASAWA
June 29, 2019
Tweet
Share
More Decks by Hiroaki KARASAWA
See All by Hiroaki KARASAWA
スタートアップでポストモーテムを4年で200回やって得た学び
karszawa
1
77
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
1
1.3k
成功する技術選定について
karszawa
3
2.8k
飲食店のインフラサービス “ダイニー” のトラブル対応のすべて
karszawa
0
77
Google Cloud のモニタリング製品を徹底活用してみた
karszawa
0
66
ダウンタイム 30 秒で AlloyDB に移行した話
karszawa
0
520
DMS で AlloyDB に簡単移行!
karszawa
0
69
【現場の本音】App Engine から Cloud Run に移行してみた
karszawa
0
180
cls-hooked による実行コンテキストの保存と利用
karszawa
0
950
Other Decks in Technology
See All in Technology
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
280
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
280
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
190
いまさら聞けない ABテスト入門
skmr2348
1
210
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
290
GopherCon Tour 概略
logica0419
2
190
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
610
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.5k
バイブコーディングと継続的デプロイメント
nwiizo
2
440
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Navigating Team Friction
lara
189
15k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Side Projects
sachag
455
43k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Being A Developer After 40
akosma
91
590k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Thoughts on Productivity
jonyablonski
70
4.9k
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