CSRなサイトを (疑似的な)ISRに変更した話

サイボウズフロントエンドマンスリー #26

Transcript

1. © 2022 Ateam Inc. Cybozu Frontend Monthly #26
2. 名前： aiji 職業： Webエンジニア （アプリケーションエンジニア） 分野： Cloudflare, Nodejs, TypeScript React, Next.js, Remix, AWS, GCP 所属： Ateam Lifedesign Inc. twitter: @aiji42_dev GitHub: aiji42 Who am I ?
3. Who am I ? 名前： rito / chimame 職業： Webエンジニア （アプリケーションエンジニア） 分野： Cloudflare, Ruby, Nodejs, TypeScript React, Docker, AWS, GCP 所属： Ateam Lifedesign Inc. twitter: @chimame_rt GitHub: chimame
4. © 2022 Ateam Inc. 4 エイチーム事業内容
5. © 2022 Ateam Inc. 5 エイチーム 主なサービス内容
6. © 2022 Ateam Inc. 今日 発表テーマ 6月頃、Zennに連投した記事 詳細
7. © 2022 Ateam Inc. CSRなサイトを (疑似的な)ISRに変更した話 7
8. © 2022 Ateam Inc. 題材となったサービス エイチームライフデザインが運営して いる総合情報サイト - カードローン - クレジットカード - 転職 - 引越し - etc… SEOを重視したWebメディア
9. © 2022 Ateam Inc. 今日 話 赤枠で囲ったところ
10. © 2022 Ateam Inc. 今日 話 赤枠で囲ったところ
11. © 2022 Ateam Inc. Client Server Storage Database Api server ナビナビ レンダリングに CSRが採用されている
12. © 2022 Ateam Inc. ナビナビ レンダリングに CSRが採用されている CSR 特徴 - コンテンツ レンダリングをブラウザで行う - パフォーマンス ユーザ 環境に依存する - TTFB 早いがLCP・TTIまで 時間が長くなる傾向にある - クローラー インデックスが遅い - ナビナビ SEOを重視したメディアな で対策が必要
13. © 2022 Ateam Inc. Dynamic Rendering クローラーがJSを実行・解釈できなかった頃に提唱された対策 https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering?hl=ja
14. © 2022 Ateam Inc. https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering?hl=ja Dynamic Rendering レンダラに Rendertron(仮想ブラウザ)が採用されることが多い Rendertron
15. © 2022 Ateam Inc. ナビナビで実際に行われていたクローラー対策 ユーザに CSR用 スクリプトを返却 ボットに 静的なHTMLを返却 定期タスクで レンダリングしたデータを ストレージに保存 Origin Strage
16. © 2022 Ateam Inc. CWV対策 できていなかった(Chrome UX report)
17. © 2022 Ateam Inc. 現状 コードに大きな変更を加えずに CWVを改善する方法を模索 17
18. © 2022 Ateam Inc. ダイナミックレンダリングをベースにした改善を計画 ダイナミックレンダリングによる静的 HTMLをCDNでキャッシュし、 ボットだけでなくユーザにもそれを返却することで CWVを改善する。 さらにCloudflareWorkersでキャッシュコントロールすることで ISRを実現する。
19. © 2022 Ateam Inc. 初回アクセス(キャッシュなし) オリジンからCSRスクリプトを返却 Client Origin Database Api server Rendertron Cloudflare Workers
20. © 2022 Ateam Inc. レスポンス後に非同期でダイナミックレンダリング +キャッシュ保存を行う Client Origin Database Api server Rendertron Cloudflare Workers KV
21. © 2022 Ateam Inc. 以降 リクエスト キャシュにより、ダイナミックレンダリング済み コンテンツが返却される restore cache Client Origin Database Api server Rendertron Cloudflare Workers KV
22. © 2022 Ateam Inc. KV(キャッシュ)にExpire情報をもたせることで擬似的なISRを実現することも可能に if steal… regenerate Client Origin Database Api server Rendertron Cloudflare Workers KV KV KV
23. © 2022 Ateam Inc. 導入結果 23
24. © 2022 Ateam Inc. 大幅に改善 (Chrome UX report)
25. © 2022 Ateam Inc. 大幅に改善 (Lighthouse) Before After
26. © 2022 Ateam Inc. アピールポイント 26
27. © 2022 Ateam Inc. ①Rendertron 魔改 そ ままで 組み込めない で、リポジトリクローンして地道に書き換え - scriptタグを消す仕様を無効化 - Bot JSが必要ない でデフォルトで scriptタグが消える - ユーザがインタラクティブに操作するためJS 必要 - ApolloClient キャッシュをDOMに吐き出すようにする(後述) - Rendertronを通過したことを示すタグを挿入 - クライアント側 処理に使用
28. © 2022 Ateam Inc. ②データ再フェッチ 抑制 クライアントで再フェッチが発生しそ ままで LCPが改善しない SSR/SSGで取られる手法をRendertronに組込んで解決する Rendertron pre-render & expose cache ApolloClient キャッシュを シリアライズしDOMに書き込む DOM上 キャッシュからリストアし データフェッチを省略 ❌ Origin Client
29. © 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
30. © 2022 Ateam Inc. 今後 展望 30
31. © 2022 Ateam Inc. 今後 展望 改善 したが、まだ完璧で ない 【残課題】 LCPおよびSI 改善したが、FCPおよびTTIが改善していない 【理由】 今回 対策で アプリケーション ほぼ手を入れていない で不要なJS ロードなども原因 1つだが、それと 別にRendertron HTMLレンダリングと Next.jsによるCSRが2回実行されることも原因 1つ。
32. © 2022 Ateam Inc. 今後 展望 対策案① GraphQL キャッシュをDOMに保持する で なくGraphQLリクエスト自体 をキャッシュする 【説明】 少し難しい話になるが、GraphQL キャッシュリストを行うとReact Hydrateエ ラーを回避するためにNext.jsで CSRも再度実行するということを行ってい る。通常 GraphQLリクエスト 場合 それが起きない。
33. © 2022 Ateam Inc. 今後 展望 対策案② 擬似的なISRをやめ、SSR＋キャッシュに寄せる 【説明】 そもそもCSRでWebメディアを運用する に苦しい局面がある。インタラクティ ブに動作する画面でなけれ SSRに寄せる。リクエスト 都度SSRする 非 常にもったいない で、SSRした結果をどこかにキャッシュして配信する が一 番効率的。（ただし、改修コスト …）
34. © 2022 Ateam Inc. PR - 新卒向け - 9/8、9/27: オンライン会社説明会 (詳しく 採用ページへ) - 短期インターン(1week)と長期インターン(2months~)やってます - 中途向け - 直近 イベント等 ありませんが、常時採用してます！ - 詳しく聞きたい、カジュアルに話してみたいという方 、 ぜひDMをお願いします 採用に限らず様々な技術発信をしてます で、ぜひフォローをお願いします