Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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 ニフティ株式会社
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
120
Grow on GitHub Collaboration Culture: Case Study of InnerSource Challenge - GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
20
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
200
継続的な改善のためのmodulesの適切な分割単位 - NIFTY Tech Talk #23
niftycorp
PRO
0
110
Re:ゼロから始めるTerraform生活 ~IaC入門編~ - NIFTY Tech Talk #23
niftycorp
PRO
0
110
Terraformにベストプラクティスを取り入れた - NIFTY Tech Talk #23
niftycorp
PRO
0
130
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
140
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
170
@nifty天気予報:フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
150
Other Decks in Programming
See All in Programming
103 Early Hints
sugi_0000
1
260
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
8
1.9k
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
810
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
130
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
280
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
160
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
770
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
160
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
340
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
580
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
Why Our Code Smells
bkeepers
PRO
335
57k
Building Your Own Lightsaber
phodgson
103
6.1k
A better future with KSS
kneath
238
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
What's in a price? How to price your products and services
michaelherold
244
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
A designer walks into a library…
pauljervisheath
205
24k
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.