Upgrade to Pro — share decks privately, control downloads, hide ads and more …

サイボウズフロントエンドマンスリー#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

    View Slide

  2. 名前: aiji
    職業: Webエンジニア
    (アプリケーションエンジニア)
    分野: Cloudflare, Nodejs, TypeScript
    React, Next.js, Remix, AWS, GCP
    所属: Ateam Lifedesign Inc.
    twitter: @aiji42_dev
    GitHub: aiji42
    Who am I ?

    View Slide

  3. Who am I ?
    名前: rito / chimame
    職業: Webエンジニア
    (アプリケーションエンジニア)
    分野: Cloudflare, Ruby, Nodejs, TypeScript
    React, Docker, AWS, GCP
    所属: Ateam Lifedesign Inc.
    twitter: @chimame_rt
    GitHub: chimame

    View Slide

  4. © 2022 Ateam Inc. 4
    エイチーム事業内容

    View Slide

  5. © 2022 Ateam Inc. 5
    エイチーム 主なサービス内容

    View Slide

  6. © 2022 Ateam Inc.
    今日 発表テーマ 6月頃、Zennに連投した記事 詳細

    View Slide

  7. © 2022 Ateam Inc.
    CSRなサイトを
    (疑似的な)ISRに変更した話
    7

    View Slide

  8. © 2022 Ateam Inc.
    題材となったサービス
    エイチームライフデザインが運営して
    いる総合情報サイト
    - カードローン
    - クレジットカード
    - 転職
    - 引越し
    - etc…
    SEOを重視したWebメディア

    View Slide

  9. © 2022 Ateam Inc.
    今日 話 赤枠で囲ったところ

    View Slide

  10. © 2022 Ateam Inc.
    今日 話 赤枠で囲ったところ

    View Slide

  11. © 2022 Ateam Inc.
    Client
    Server
    Storage
    Database
    Api server
    ナビナビ レンダリングに CSRが採用されている

    View Slide

  12. © 2022 Ateam Inc.
    ナビナビ レンダリングに CSRが採用されている
    CSR 特徴
    - コンテンツ レンダリングをブラウザで行う
    - パフォーマンス ユーザ 環境に依存する
    - TTFB 早いがLCP・TTIまで 時間が長くなる傾向にある
    - クローラー インデックスが遅い
    - ナビナビ SEOを重視したメディアな で対策が必要

    View Slide

  13. © 2022 Ateam Inc.
    Dynamic Rendering
    クローラーがJSを実行・解釈できなかった頃に提唱された対策
    https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering?hl=ja

    View Slide

  14. © 2022 Ateam Inc.
    https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering?hl=ja
    Dynamic Rendering
    レンダラに Rendertron(仮想ブラウザ)が採用されることが多い
    Rendertron

    View Slide

  15. © 2022 Ateam Inc.
    ナビナビで実際に行われていたクローラー対策
    ユーザに CSR用 スクリプトを返却
    ボットに 静的なHTMLを返却
    定期タスクで
    レンダリングしたデータを
    ストレージに保存
    Origin
    Strage

    View Slide

  16. © 2022 Ateam Inc.
    CWV対策 できていなかった(Chrome UX report)

    View Slide

  17. © 2022 Ateam Inc.
    現状 コードに大きな変更を加えずに
    CWVを改善する方法を模索
    17

    View Slide

  18. © 2022 Ateam Inc.
    ダイナミックレンダリングをベースにした改善を計画
    ダイナミックレンダリングによる静的 HTMLをCDNでキャッシュし、
    ボットだけでなくユーザにもそれを返却することで CWVを改善する。
    さらにCloudflareWorkersでキャッシュコントロールすることで ISRを実現する。

    View Slide

  19. © 2022 Ateam Inc.
    初回アクセス(キャッシュなし) オリジンからCSRスクリプトを返却
    Client
    Origin
    Database
    Api server
    Rendertron
    Cloudflare
    Workers

    View Slide

  20. © 2022 Ateam Inc.
    レスポンス後に非同期でダイナミックレンダリング
    +キャッシュ保存を行う
    Client
    Origin
    Database
    Api server
    Rendertron
    Cloudflare
    Workers
    KV

    View Slide

  21. © 2022 Ateam Inc.
    以降 リクエスト キャシュにより、ダイナミックレンダリング済み コンテンツが返却される
    restore cache
    Client
    Origin
    Database
    Api server
    Rendertron
    Cloudflare
    Workers
    KV

    View Slide

  22. © 2022 Ateam Inc.
    KV(キャッシュ)にExpire情報をもたせることで擬似的なISRを実現することも可能に
    if steal…
    regenerate
    Client
    Origin
    Database
    Api server
    Rendertron
    Cloudflare
    Workers
    KV
    KV KV

    View Slide

  23. © 2022 Ateam Inc.
    導入結果
    23

    View Slide

  24. © 2022 Ateam Inc.
    大幅に改善 (Chrome UX report)

    View Slide

  25. © 2022 Ateam Inc.
    大幅に改善 (Lighthouse)
    Before After

    View Slide

  26. © 2022 Ateam Inc.
    アピールポイント
    26

    View Slide

  27. © 2022 Ateam Inc.
    ①Rendertron 魔改
    そ ままで 組み込めない で、リポジトリクローンして地道に書き換え
    - scriptタグを消す仕様を無効化
    - Bot JSが必要ない でデフォルトで scriptタグが消える
    - ユーザがインタラクティブに操作するためJS 必要
    - ApolloClient キャッシュをDOMに吐き出すようにする(後述)
    - Rendertronを通過したことを示すタグを挿入
    - クライアント側 処理に使用

    View Slide

  28. © 2022 Ateam Inc.
    ②データ再フェッチ 抑制
    クライアントで再フェッチが発生しそ ままで LCPが改善しない
    SSR/SSGで取られる手法をRendertronに組込んで解決する
    Rendertron
    pre-render &
    expose cache
    ApolloClient キャッシュを
    シリアライズしDOMに書き込む
    DOM上 キャッシュからリストアし
    データフェッチを省略 ❌
    Origin
    Client

    View Slide

  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

    View Slide

  30. © 2022 Ateam Inc.
    今後 展望
    30

    View Slide

  31. © 2022 Ateam Inc.
    今後 展望
    改善 したが、まだ完璧で ない
    【残課題】
    LCPおよびSI 改善したが、FCPおよびTTIが改善していない
    【理由】
    今回 対策で アプリケーション ほぼ手を入れていない で不要なJS
    ロードなども原因 1つだが、それと 別にRendertron HTMLレンダリングと
    Next.jsによるCSRが2回実行されることも原因 1つ。

    View Slide

  32. © 2022 Ateam Inc.
    今後 展望
    対策案①
    GraphQL キャッシュをDOMに保持する で なくGraphQLリクエスト自体
    をキャッシュする
    【説明】
    少し難しい話になるが、GraphQL キャッシュリストを行うとReact Hydrateエ
    ラーを回避するためにNext.jsで CSRも再度実行するということを行ってい
    る。通常 GraphQLリクエスト 場合 それが起きない。

    View Slide

  33. © 2022 Ateam Inc.
    今後 展望
    対策案②
    擬似的なISRをやめ、SSR+キャッシュに寄せる
    【説明】
    そもそもCSRでWebメディアを運用する に苦しい局面がある。インタラクティ
    ブに動作する画面でなけれ SSRに寄せる。リクエスト 都度SSRする 非
    常にもったいない で、SSRした結果をどこかにキャッシュして配信する が一
    番効率的。(ただし、改修コスト …)

    View Slide

  34. © 2022 Ateam Inc.
    PR
    - 新卒向け
    - 9/8、9/27: オンライン会社説明会 (詳しく 採用ページへ)
    - 短期インターン(1week)と長期インターン(2months~)やってます
    - 中途向け
    - 直近 イベント等 ありませんが、常時採用してます!
    - 詳しく聞きたい、カジュアルに話してみたいという方 、
    ぜひDMをお願いします
    採用に限らず様々な技術発信をしてます で、ぜひフォローをお願いします

    View Slide

  35. View Slide