$30 off During Our Annual Pro Sale. View Details »

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

AijiUejima
August 30, 2022

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

AijiUejima

August 30, 2022
Tweet

More Decks by AijiUejima

Other Decks in Technology

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をお願いします 採用に限らず様々な技術発信をしてます で、ぜひフォローをお願いします
  35. None