Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

NIFTY Tech Talk #09 ニフティトップのNext.jsでのキャッシュ戦略を考えた話

NIFTY Tech Talk #09 ニフティトップのNext.jsでのキャッシュ戦略を考えた話

ニフティ株式会社

March 08, 2023
Tweet

Video


Resources

SvelteKit, Next.jsの導入事例紹介など 〜ニフティのフロントエンドの今とこれから〜 - NIFTY Tech Talk #9

https://nifty.connpass.com/event/273568/

More Decks by ニフティ株式会社

Other Decks in Programming

Transcript

  1. Copyright © NIFTY Corporation All Rights Reserved. 
 2
 あらためて自己紹介


    ニフティ株式会社
 
 佐々木 優
 
 • 新卒入社4年目
 
 • @niftyトップページ開発/運用
 
 • 自転車・国内旅行にハマり中
 
 

  2. Copyright © NIFTY Corporation All Rights Reserved. 
 キャッシュとは?
 •

    一度利用したブラウザやサーバー側にあるデータを
 一時的に保存する機能
 
 
 キャッシュの種類
 • ブラウザキャッシュ
 • CDNのキャッシュ
 など
 
 ※CDN = サーバーからの応答を
  肩代わりするためのもの
 4
 キャッシュの概要 

  3. Copyright © NIFTY Corporation All Rights Reserved. 
 5
 キャッシュの目的


    コスト削減
 • 画像などのコンテンツをキャッシュさせることで
 サーバー側へのリクエストにかかるコストを削減できる
 
 
 インフラリソースの負荷軽減
 • ブラウザやCDNを用いることでサーバー側への負荷を肩代 わりできる
 
 
 パフォーマンス向上
 • 銀の弾丸ではないがWebページのレスポンスタイムを減らす ことができる

  4. Copyright © NIFTY Corporation All Rights Reserved. 
 6
 キャッシュの目的


    コスト削減
 • 画像などのコンテンツをキャッシュさせることで
 サーバー側へのリクエストにかかるコストを削減できる
 
 
 インフラリソースの負荷軽減
 • ブラウザやCDNを用いることでサーバー側への負荷を肩代 わりできる
 
 
 パフォーマンス向上
 • 銀の弾丸ではないがWebページのレスポンスタイムを減らす ことができる

  5. Copyright © NIFTY Corporation All Rights Reserved. 
 サイトの概要
 •

    ニフティの会員向けポータルサイト
 • 月間82万UU、1,989万PV!! ※2023/01実績
 • 2022年7月にシステム基盤刷新を行った
 ◦ ReactベースのNext.js + 
 Serverless Framework + CDN構成
 
 
 
 
 詳細は 『NIFTY Tech Talk #4 レガシーシステムからの脱却』を
 ご参照ください!
 https://www.youtube.com/watch?v=Ttium-UNEEU
 8
 @niftyトップページについて

  6. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 •

    CloudFront
 • Serverless Framework(Next.jsをサーバレス環境へデプロイ するために使用)
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 9
 @niftyトップページキャッシュ構成

  7. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 •

    CloudFront
 • Serverless Framework(Next.jsをサーバレス環境へデプロイす るために使用)
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 10
 @niftyトップページキャッシュ構成

  8. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 •

    CloudFront
 • Serverless Framework(Next.jsをサーバレス環境へデプロイす るために使用)
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 11
 @niftyトップページキャッシュ構成
 ブラウザ→CloudFront へのリクエスト料金が発 生💰
  9. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 •

    CloudFront
 • Serverless Framework(Next.jsをサーバレス環境へデプロイ するために使用)
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 12
 @niftyトップページキャッシュ構成
 ブラウザ→CloudFront へのリクエスト料金が発 生💰
  10. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 •

    CloudFront
 • Serverless Framework(Next.jsをサーバレス環境へデプロイ するために使用)
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 13
 @niftyトップページキャッシュ構成
 よりユーザーに近い位置でのキャッシュ CDNへのリクエストも軽減できる 💪 ブラウザ→CloudFront へのリクエスト料金が発 生💰
  11. Copyright © NIFTY Corporation All Rights Reserved. 
 キャッシュするもの
 


    • 画像やCSS、JSファイルなどあまり更新されない コンテンツはキャッシュさせる!
 • 特に画像はデータ転送量が大きいので効果大
 • Next.jsでは静的コンテンツはデフォルトでキャッ シュされる設定になっている
 
 
 15
 キャッシュ戦略①

  12. Copyright © NIFTY Corporation All Rights Reserved. 
 キャッシュさせないもの
 


    • APIなどユーザーによって返される内容が異 なるものはキャッシュさせない!
 • @niftyトップページにはログイン機能があり多 数の枠で利用している
 • 安全側に倒す方針を採用
 
 
 
 16
 キャッシュ戦略②

  13. Copyright © NIFTY Corporation All Rights Reserved. 
 
 設定はなるべくシンプルに


    
 • まずはシンプルに考える!
 • CDNとブラウザで同じキャッシュ設定に
 • できるだけユーザーに近い部分でキャッシュ させる
 17
 キャッシュ戦略③

  14. Copyright © NIFTY Corporation All Rights Reserved. 
 next/imageの画像のブラウザキャッシュが短く設定されて いた


    • next/image
 →Next.jsで画像を最適化してくれる技術
 
 • 本来不要なリクエストが発生
 →CloudFrontのコストも増加
 
 • Severless Frameworkのデプロイ時に
 Next.jsのキャッシュ設定が上書きされててしまう
 19
 失敗談①

  15. Copyright © NIFTY Corporation All Rights Reserved. 
 対処
 •

    Next.jsでブラウザキャッシュを効かせるためのルール を追加
 
    next/imageのブラウザキャッシュを直接指定してみる
 20
 失敗談②
 async headers() { return [ { source: '/_next/image:slug*', headers: [ { key: 'Cache-Control', value: 'public, max-age=31536000, must-revalidate', }, ], }, } 
 例)
 next.config.js
  16. Copyright © NIFTY Corporation All Rights Reserved. 
 結果
 •

    無事にnext/imageのブラウザキャッシュが効いた!
 • CloudFrontへのリクエストが減った!
 • 1000USD/月 程度のコストを削減できた!
 21
 どうなったのか?

  17. Copyright © NIFTY Corporation All Rights Reserved. 
 Good
 •

    事前にキャッシュパターンを決めていた
 
 Bad
 • リリース後に正しくキャッシュが設定されているかの
 チェックが抜けていた
 • CloudFrontのコスト増加に気づけなかった
 
 Try
 • リリース後にはキャッシュ設定のチェックを行う
 • 普段からCost Explorerなどでコストを把握する癖をつける
 振り返り①
 22

  18. Copyright © NIFTY Corporation All Rights Reserved. 
 振り返り②
 Learn


    • 静的コンテンツはなるべくブラウザキャッシュさせる
 →更新頻度の低いコンテンツをまとめて管理できる設計
 
 • キャッシュを常に把握できる状態にしておく
 →今の設定が本当に正しいのか?を検証可能に
 
 • 全てを一度に設定しようとしない
 →キャッシュなしの設定から徐々にキャッシュさせていく
 
 
 
 23

  19. Copyright © NIFTY Corporation All Rights Reserved. 
 おわりに
 まとめ


    • @niftyトップページでキャッシュ戦略考えた
 • キャッシュを正しく把握/設計することでインフラコストの削減に 繋がった
 • 失敗談から得た知見について
 
 
 
 
 
 24