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
290
SSRとCSRの狭間で〜ハイパフォーマンスWebサービスを夢見るフロントエンドエンジニアの闘い〜
BigLT Aizu 2019
Hiroaki KARASAWA
June 29, 2019
Tweet
Share
More Decks by Hiroaki KARASAWA
See All by Hiroaki KARASAWA
成功する技術選定について
karszawa
2
2.3k
飲食店のインフラサービス “ダイニー” のトラブル対応のすべて
karszawa
0
16
Google Cloud のモニタリング製品を徹底活用してみた
karszawa
0
38
ダウンタイム 30 秒で AlloyDB に移行した話
karszawa
0
110
DMS で AlloyDB に簡単移行!
karszawa
0
45
【現場の本音】App Engine から Cloud Run に移行してみた
karszawa
0
140
cls-hooked による実行コンテキストの保存と利用
karszawa
0
810
Hasura の Relationship と権限管理
karszawa
0
850
React Native + Expo のバージョンアップと互換性の維持に関する運用と絶技
karszawa
0
790
Other Decks in Technology
See All in Technology
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.6k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
350
AIエージェント元年
shukob
0
160
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
140
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
440
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
内製化を加速させるlaC活用術
nrinetcom
PRO
2
140
短縮URLをお手軽に導入しよう
nakasho
0
150
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
670
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Applications with DynamoDB
mza
93
6.2k
KATA
mclloyd
29
14k
Designing for Performance
lara
604
68k
For a Future-Friendly Web
brad_frost
176
9.6k
Bash Introduction
62gerente
611
210k
A better future with KSS
kneath
238
17k
Into the Great Unknown - MozCon
thekraken
35
1.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
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