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

Copyright © NIFTY Corporation All Rights Reserved.  
ニフティトップのNext.jsでの
キャッシュ戦略を考えた話
佐々木　優 
会員システムグループ  

View Slide

Copyright © NIFTY Corporation All Rights Reserved.   2 
あらためて自己紹介 
ニフティ株式会社 
 
佐々木優 
 
● 新卒入社4年目 
 
● @niftyトップページ開発/運用 
 
● 自転車・国内旅行にハマり中 
 
 

View Slide

キャッシュとは何か？ 
3 

View Slide

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

View Slide

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

View Slide

@niftyトップページでも 
キャッシュ戦略を考えてみました！ 
7 

View Slide

サイトの概要 
● ニフティの会員向けポータルサイト 
● 月間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トップページについて 

View Slide

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

View Slide

● CloudFront 
● Serverless Framework（Next.jsをサーバレス環境へデプロイす
るために使用） 
 
 
10 

View Slide

● CloudFront 
● Serverless Framework（Next.jsをサーバレス環境へデプロイす
るために使用） 
 
 
11 
ブラウザ→CloudFront
へのリクエスト料金が発
生💰

View Slide

● CloudFront 
 
 
12 
生💰

View Slide

● CloudFront 
 
 
13 
よりユーザーに近い位置でのキャッシュ
CDNへのリクエストも軽減できる 💪
生💰

View Slide

どうキャッシュさせるのが良いか？ 
 
14 

View Slide

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

View Slide

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

View Slide

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

View Slide

無事リリース完了！ 
一見問題無さそうだが... 
18 

View Slide

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

View Slide

対処 
● 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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide


View Slide

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

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

ニフティ株式会社

More Decks by ニフティ株式会社

Other Decks in Programming

Featured

Transcript