© 2022 Ateam Inc.Cybozu Frontend Monthly #26
View Slide
名前: aiji職業: Webエンジニア(アプリケーションエンジニア)分野: Cloudflare, Nodejs, TypeScriptReact, Next.js, Remix, AWS, GCP所属: Ateam Lifedesign Inc.twitter: @aiji42_devGitHub: aiji42Who am I ?
Who am I ?名前: rito / chimame職業: Webエンジニア(アプリケーションエンジニア)分野: Cloudflare, Ruby, Nodejs, TypeScriptReact, Docker, AWS, GCP所属: Ateam Lifedesign Inc.twitter: @chimame_rtGitHub: 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.ClientServerStorageDatabaseApi 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=jaDynamic Renderingレンダラに Rendertron(仮想ブラウザ)が採用されることが多いRendertron
© 2022 Ateam Inc.ナビナビで実際に行われていたクローラー対策ユーザに CSR用 スクリプトを返却ボットに 静的なHTMLを返却定期タスクでレンダリングしたデータをストレージに保存OriginStrage
© 2022 Ateam Inc.CWV対策 できていなかった(Chrome UX report)
© 2022 Ateam Inc.現状 コードに大きな変更を加えずにCWVを改善する方法を模索17
© 2022 Ateam Inc.ダイナミックレンダリングをベースにした改善を計画ダイナミックレンダリングによる静的 HTMLをCDNでキャッシュし、ボットだけでなくユーザにもそれを返却することで CWVを改善する。さらにCloudflareWorkersでキャッシュコントロールすることで ISRを実現する。
© 2022 Ateam Inc.初回アクセス(キャッシュなし) オリジンからCSRスクリプトを返却ClientOriginDatabaseApi serverRendertronCloudflareWorkers
© 2022 Ateam Inc.レスポンス後に非同期でダイナミックレンダリング+キャッシュ保存を行うClientOriginDatabaseApi serverRendertronCloudflareWorkersKV
© 2022 Ateam Inc.以降 リクエスト キャシュにより、ダイナミックレンダリング済み コンテンツが返却されるrestore cacheClientOriginDatabaseApi serverRendertronCloudflareWorkersKV
© 2022 Ateam Inc.KV(キャッシュ)にExpire情報をもたせることで擬似的なISRを実現することも可能にif steal…regenerateClientOriginDatabaseApi serverRendertronCloudflareWorkersKVKV 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に組込んで解決するRendertronpre-render &expose cacheApolloClient キャッシュをシリアライズしDOMに書き込むDOM上 キャッシュからリストアしデータフェッチを省略 ❌OriginClient
© 2022 Ateam Inc.③キャッシュとリアルタイム 共存社内アクセス社外アクセスCloudflare KVHTML + cache expire2つが保存されているresponseHTML(SSR)responseHTML(CSR)RendertronresponseHTML(CSR)save HTMLgenerate 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をお願いします採用に限らず様々な技術発信をしてます で、ぜひフォローをお願いします