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
CSRなサイトを (疑似的な)ISRに変更した話
Search
chimame
August 30, 2022
Technology
0
640
CSRなサイトを (疑似的な)ISRに変更した話
サイボウズフロントエンドマンスリー #26
chimame
August 30, 2022
Tweet
Share
More Decks by chimame
See All by chimame
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
110
Boost Your Web Performance with Hyperdrive
chimame
1
300
RemixでVersion skewに立ち向かう
chimame
2
1.1k
私がエッジを使う理由
chimame
10
4.1k
GraphQL Server on Edge after that
chimame
1
1.5k
Accelerating App Dev with Cloudflare Workers
chimame
1
450
GraphQL Server on Edge
chimame
12
6k
エッジで輝くフロントエンド
chimame
11
6.7k
Cloudflare Workersと状態管理
chimame
4
1.8k
Other Decks in Technology
See All in Technology
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
200
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
160
M365アカウント侵害時の初動対応
lhazy
5
4.1k
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
220
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
360
"Découvrir le Liberland"
rlifchitz
0
130
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
380
Bliki (ja), and the Cathedral, and the Bazaar
koic
6
970
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
180
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
27
7.9k
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
150
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
130
Featured
See All Featured
KATA
mclloyd
30
14k
Code Reviewing Like a Champion
maltzj
524
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Building Applications with DynamoDB
mza
95
6.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A designer walks into a library…
pauljervisheath
207
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
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