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

by ニフティ株式会社

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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トップページについて 

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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