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
サイボウズフロントエンドマンスリー#26_エイチーム
Search
AijiUejima
August 30, 2022
Technology
0
440
サイボウズフロントエンドマンスリー#26_エイチーム
AijiUejima
August 30, 2022
Tweet
Share
More Decks by AijiUejima
See All by AijiUejima
エッジはフロントエンドなのか? バックエンドなのか? について考えてみる
aiji42
7
5.7k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
7
2.5k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
3k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.7k
Cloudflare Fonts試してみた🔤
aiji42
2
820
Hyperdrive試してみた🛸
aiji42
3
1.4k
Workers Browser Rendering API について
aiji42
0
590
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.6k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
980
Other Decks in Technology
See All in Technology
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
930
slog.Handlerのよくある実装ミス
sakiengineer
4
470
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
120
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Applications with DynamoDB
mza
96
6.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Into the Great Unknown - MozCon
thekraken
40
2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
KATA
mclloyd
32
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Producing Creativity
orderedlist
PRO
347
40k
A better future with KSS
kneath
239
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Transcript
© 2022 Ateam Inc. Cybozu Frontend Monthly #26
名前: aiji 職業: Webエンジニア (アプリケーションエンジニア) 分野: Cloudflare, Nodejs, TypeScript React,
Next.js, Remix, AWS, GCP 所属: Ateam Lifedesign Inc. twitter: @aiji42_dev GitHub: aiji42 Who am I ?
Who am I ? 名前: rito / chimame 職業: Webエンジニア
(アプリケーションエンジニア) 分野: Cloudflare, Ruby, Nodejs, TypeScript React, Docker, AWS, GCP 所属: Ateam Lifedesign Inc. twitter: @chimame_rt GitHub: chimame
© 2022 Ateam Inc. 4 エイチーム事業内容
© 2022 Ateam Inc. 5 エイチーム 主なサービス内容
© 2022 Ateam Inc. 今日 発表テーマ 6月頃、Zennに連投した記事 詳細
© 2022 Ateam Inc. CSRなサイトを (疑似的な)ISRに変更した話 7
© 2022 Ateam Inc. 題材となったサービス エイチームライフデザインが運営して いる総合情報サイト - カードローン -
クレジットカード - 転職 - 引越し - etc… SEOを重視したWebメディア
© 2022 Ateam Inc. 今日 話 赤枠で囲ったところ
© 2022 Ateam Inc. 今日 話 赤枠で囲ったところ
© 2022 Ateam Inc. Client Server Storage Database Api server
ナビナビ レンダリングに CSRが採用されている
© 2022 Ateam Inc. ナビナビ レンダリングに CSRが採用されている CSR 特徴 -
コンテンツ レンダリングをブラウザで行う - パフォーマンス ユーザ 環境に依存する - TTFB 早いがLCP・TTIまで 時間が長くなる傾向にある - クローラー インデックスが遅い - ナビナビ SEOを重視したメディアな で対策が必要
© 2022 Ateam Inc. Dynamic Rendering クローラーがJSを実行・解釈できなかった頃に提唱された対策 https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering?hl=ja
© 2022 Ateam Inc. https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering?hl=ja Dynamic Rendering レンダラに Rendertron(仮想ブラウザ)が採用されることが多い Rendertron
© 2022 Ateam Inc. ナビナビで実際に行われていたクローラー対策 ユーザに CSR用 スクリプトを返却 ボットに 静的なHTMLを返却
定期タスクで レンダリングしたデータを ストレージに保存 Origin Strage
© 2022 Ateam Inc. CWV対策 できていなかった(Chrome UX report)
© 2022 Ateam Inc. 現状 コードに大きな変更を加えずに CWVを改善する方法を模索 17
© 2022 Ateam Inc. ダイナミックレンダリングをベースにした改善を計画 ダイナミックレンダリングによる静的 HTMLをCDNでキャッシュし、 ボットだけでなくユーザにもそれを返却することで CWVを改善する。 さらにCloudflareWorkersでキャッシュコントロールすることで
ISRを実現する。
© 2022 Ateam Inc. 初回アクセス(キャッシュなし) オリジンからCSRスクリプトを返却 Client Origin Database Api
server Rendertron Cloudflare Workers
© 2022 Ateam Inc. レスポンス後に非同期でダイナミックレンダリング +キャッシュ保存を行う Client Origin Database Api
server Rendertron Cloudflare Workers KV
© 2022 Ateam Inc. 以降 リクエスト キャシュにより、ダイナミックレンダリング済み コンテンツが返却される restore cache
Client Origin Database Api server Rendertron Cloudflare Workers KV
© 2022 Ateam Inc. KV(キャッシュ)にExpire情報をもたせることで擬似的なISRを実現することも可能に if steal… regenerate Client Origin
Database Api server Rendertron Cloudflare Workers KV KV KV
© 2022 Ateam Inc. 導入結果 23
© 2022 Ateam Inc. 大幅に改善 (Chrome UX report)
© 2022 Ateam Inc. 大幅に改善 (Lighthouse) Before After
© 2022 Ateam Inc. アピールポイント 26
© 2022 Ateam Inc. ①Rendertron 魔改 そ ままで 組み込めない で、リポジトリクローンして地道に書き換え
- scriptタグを消す仕様を無効化 - Bot JSが必要ない でデフォルトで scriptタグが消える - ユーザがインタラクティブに操作するためJS 必要 - ApolloClient キャッシュをDOMに吐き出すようにする(後述) - Rendertronを通過したことを示すタグを挿入 - クライアント側 処理に使用
© 2022 Ateam Inc. ②データ再フェッチ 抑制 クライアントで再フェッチが発生しそ ままで LCPが改善しない SSR/SSGで取られる手法をRendertronに組込んで解決する
Rendertron pre-render & expose cache ApolloClient キャッシュを シリアライズしDOMに書き込む DOM上 キャッシュからリストアし データフェッチを省略 ❌ Origin Client
© 2022 Ateam Inc. ③キャッシュとリアルタイム 共存 社内アクセス 社外アクセス Cloudflare KV
HTML + cache expire 2つが保存されている response HTML(SSR) response HTML(CSR) Rendertron response HTML(CSR) save HTML generate HTML (if cache expire) generate HTML(all access) アクセス 社内、社外で ルートと異なる CSRを実行して レンダリングした HTMLを生成する 記事を編集した結果をリアルタイムで表示する KV
© 2022 Ateam Inc. 今後 展望 30
© 2022 Ateam Inc. 今後 展望 改善 したが、まだ完璧で ない 【残課題】
LCPおよびSI 改善したが、FCPおよびTTIが改善していない 【理由】 今回 対策で アプリケーション ほぼ手を入れていない で不要なJS ロードなども原因 1つだが、それと 別にRendertron HTMLレンダリングと Next.jsによるCSRが2回実行されることも原因 1つ。
© 2022 Ateam Inc. 今後 展望 対策案① GraphQL キャッシュをDOMに保持する で
なくGraphQLリクエスト自体 をキャッシュする 【説明】 少し難しい話になるが、GraphQL キャッシュリストを行うとReact Hydrateエ ラーを回避するためにNext.jsで CSRも再度実行するということを行ってい る。通常 GraphQLリクエスト 場合 それが起きない。
© 2022 Ateam Inc. 今後 展望 対策案② 擬似的なISRをやめ、SSR+キャッシュに寄せる 【説明】 そもそもCSRでWebメディアを運用する
に苦しい局面がある。インタラクティ ブに動作する画面でなけれ SSRに寄せる。リクエスト 都度SSRする 非 常にもったいない で、SSRした結果をどこかにキャッシュして配信する が一 番効率的。(ただし、改修コスト …)
© 2022 Ateam Inc. PR - 新卒向け - 9/8、9/27: オンライン会社説明会
(詳しく 採用ページへ) - 短期インターン(1week)と長期インターン(2months~)やってます - 中途向け - 直近 イベント等 ありませんが、常時採用してます! - 詳しく聞きたい、カジュアルに話してみたいという方 、 ぜひDMをお願いします 採用に限らず様々な技術発信をしてます で、ぜひフォローをお願いします
None