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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide