Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NIFTY Tech Talk #09 ニフティトップのNext.jsでのキャッシュ戦略を考えた話
Search
ニフティ株式会社
PRO
March 08, 2023
Video
Resources
Programming
0
1k
NIFTY Tech Talk #09 ニフティトップのNext.jsでのキャッシュ戦略を考えた話
ニフティ株式会社
PRO
March 08, 2023
Tweet
Share
Video
Resources
SvelteKit, Next.jsの導入事例紹介など 〜ニフティのフロントエンドの今とこれから〜 - NIFTY Tech Talk #9
https://nifty.connpass.com/event/273568/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
継続的な改善のためのmodulesの適切な分割単位 - NIFTY Tech Talk #23
niftycorp
PRO
0
71
Re:ゼロから始めるTerraform生活 ~IaC入門編~ - NIFTY Tech Talk #23
niftycorp
PRO
0
71
Terraformにベストプラクティスを取り入れた - NIFTY Tech Talk #23
niftycorp
PRO
0
88
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
110
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
130
@nifty天気予報:フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
120
@nifty天気予報のフロントエンドを 実装するまで - NIFTY Tech Talk #22
niftycorp
PRO
0
120
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
240
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
1
70
Other Decks in Programming
See All in Programming
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
360
かんたんデザイン編集やってみた~「完全に理解した」までの道のり~
morit4ryo
1
110
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
5
5.7k
cmp.Or に感動した
otakakot
3
330
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
Leverage LLMs in Java with LangChain4j and Quarkus
hollycummins
0
110
TypeScript でバックもやるって実際どう? 実運用で困ったこと3選
yuichiro_serita
17
7k
大規模サイトリビルドの現場から:成功と失敗のリアルな教訓 / Site Rebuild,Real Lessons Learned from Successes and Failures_JJUG Fall 2024
techtekt
0
190
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
340
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.3k
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
9
4k
macOS なしで iOS アプリを開発する(※ただし xxx に限る)
mitsuharu
1
150
Featured
See All Featured
Writing Fast Ruby
sferik
627
61k
Raft: Consensus for Rubyists
vanstee
136
6.7k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
KATA
mclloyd
29
14k
Happy Clients
brianwarren
98
6.7k
It's Worth the Effort
3n
183
27k
How to Think Like a Performance Engineer
csswizardry
20
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Into the Great Unknown - MozCon
thekraken
33
1.5k
How GitHub (no longer) Works
holman
310
140k
Transcript
Copyright © NIFTY Corporation All Rights Reserved. ニフティトップのNext.jsでの キャッシュ戦略を考えた話
佐々木 優 会員システムグループ
Copyright © NIFTY Corporation All Rights Reserved. 2 あらためて自己紹介
ニフティ株式会社 佐々木 優 • 新卒入社4年目 • @niftyトップページ開発/運用 • 自転車・国内旅行にハマり中
Copyright © NIFTY Corporation All Rights Reserved. キャッシュとは何か? 3
Copyright © NIFTY Corporation All Rights Reserved. キャッシュとは? •
一度利用したブラウザやサーバー側にあるデータを 一時的に保存する機能 キャッシュの種類 • ブラウザキャッシュ • CDNのキャッシュ など ※CDN = サーバーからの応答を 肩代わりするためのもの 4 キャッシュの概要
Copyright © NIFTY Corporation All Rights Reserved. 5 キャッシュの目的
コスト削減 • 画像などのコンテンツをキャッシュさせることで サーバー側へのリクエストにかかるコストを削減できる インフラリソースの負荷軽減 • ブラウザやCDNを用いることでサーバー側への負荷を肩代 わりできる パフォーマンス向上 • 銀の弾丸ではないがWebページのレスポンスタイムを減らす ことができる
Copyright © NIFTY Corporation All Rights Reserved. 6 キャッシュの目的
コスト削減 • 画像などのコンテンツをキャッシュさせることで サーバー側へのリクエストにかかるコストを削減できる インフラリソースの負荷軽減 • ブラウザやCDNを用いることでサーバー側への負荷を肩代 わりできる パフォーマンス向上 • 銀の弾丸ではないがWebページのレスポンスタイムを減らす ことができる
Copyright © NIFTY Corporation All Rights Reserved. @niftyトップページでも キャッシュ戦略を考えてみました!
7
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トップページについて
Copyright © NIFTY Corporation All Rights Reserved. CDNのキャッシュ •
CloudFront • Serverless Framework(Next.jsをサーバレス環境へデプロイ するために使用) ブラウザキャッシュ • 基本はNext.jsで管理 9 @niftyトップページキャッシュ構成
Copyright © NIFTY Corporation All Rights Reserved. CDNのキャッシュ •
CloudFront • Serverless Framework(Next.jsをサーバレス環境へデプロイす るために使用) ブラウザキャッシュ • 基本はNext.jsで管理 10 @niftyトップページキャッシュ構成
Copyright © NIFTY Corporation All Rights Reserved. CDNのキャッシュ •
CloudFront • Serverless Framework(Next.jsをサーバレス環境へデプロイす るために使用) ブラウザキャッシュ • 基本はNext.jsで管理 11 @niftyトップページキャッシュ構成 ブラウザ→CloudFront へのリクエスト料金が発 生💰
Copyright © NIFTY Corporation All Rights Reserved. CDNのキャッシュ •
CloudFront • Serverless Framework(Next.jsをサーバレス環境へデプロイ するために使用) ブラウザキャッシュ • 基本はNext.jsで管理 12 @niftyトップページキャッシュ構成 ブラウザ→CloudFront へのリクエスト料金が発 生💰
Copyright © NIFTY Corporation All Rights Reserved. CDNのキャッシュ •
CloudFront • Serverless Framework(Next.jsをサーバレス環境へデプロイ するために使用) ブラウザキャッシュ • 基本はNext.jsで管理 13 @niftyトップページキャッシュ構成 よりユーザーに近い位置でのキャッシュ CDNへのリクエストも軽減できる 💪 ブラウザ→CloudFront へのリクエスト料金が発 生💰
Copyright © NIFTY Corporation All Rights Reserved. どうキャッシュさせるのが良いか?
14
Copyright © NIFTY Corporation All Rights Reserved. キャッシュするもの
• 画像やCSS、JSファイルなどあまり更新されない コンテンツはキャッシュさせる! • 特に画像はデータ転送量が大きいので効果大 • Next.jsでは静的コンテンツはデフォルトでキャッ シュされる設定になっている 15 キャッシュ戦略①
Copyright © NIFTY Corporation All Rights Reserved. キャッシュさせないもの
• APIなどユーザーによって返される内容が異 なるものはキャッシュさせない! • @niftyトップページにはログイン機能があり多 数の枠で利用している • 安全側に倒す方針を採用 16 キャッシュ戦略②
Copyright © NIFTY Corporation All Rights Reserved. 設定はなるべくシンプルに
• まずはシンプルに考える! • CDNとブラウザで同じキャッシュ設定に • できるだけユーザーに近い部分でキャッシュ させる 17 キャッシュ戦略③
Copyright © NIFTY Corporation All Rights Reserved. 無事リリース完了! 一見問題無さそうだが...
18
Copyright © NIFTY Corporation All Rights Reserved. next/imageの画像のブラウザキャッシュが短く設定されて いた
• next/image →Next.jsで画像を最適化してくれる技術 • 本来不要なリクエストが発生 →CloudFrontのコストも増加 • Severless Frameworkのデプロイ時に Next.jsのキャッシュ設定が上書きされててしまう 19 失敗談①
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
Copyright © NIFTY Corporation All Rights Reserved. 結果 •
無事にnext/imageのブラウザキャッシュが効いた! • CloudFrontへのリクエストが減った! • 1000USD/月 程度のコストを削減できた! 21 どうなったのか?
Copyright © NIFTY Corporation All Rights Reserved. Good •
事前にキャッシュパターンを決めていた Bad • リリース後に正しくキャッシュが設定されているかの チェックが抜けていた • CloudFrontのコスト増加に気づけなかった Try • リリース後にはキャッシュ設定のチェックを行う • 普段からCost Explorerなどでコストを把握する癖をつける 振り返り① 22
Copyright © NIFTY Corporation All Rights Reserved. 振り返り② Learn
• 静的コンテンツはなるべくブラウザキャッシュさせる →更新頻度の低いコンテンツをまとめて管理できる設計 • キャッシュを常に把握できる状態にしておく →今の設定が本当に正しいのか?を検証可能に • 全てを一度に設定しようとしない →キャッシュなしの設定から徐々にキャッシュさせていく 23
Copyright © NIFTY Corporation All Rights Reserved. おわりに まとめ
• @niftyトップページでキャッシュ戦略考えた • キャッシュを正しく把握/設計することでインフラコストの削減に 繋がった • 失敗談から得た知見について 24
Copyright © NIFTY Corporation All Rights Reserved.