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
PR TIMESにおけるNext.jsとcacheの付き合い方
Search
Ryuya Yanagi
December 10, 2024
Technology
3
2.8k
PR TIMESにおけるNext.jsとcacheの付き合い方
Ryuya Yanagi
December 10, 2024
Tweet
Share
More Decks by Ryuya Yanagi
See All by Ryuya Yanagi
PR_TIMESにおけるFastlyの導入と運用について.pptx.pdf
apple_yagi
0
13
開発速度を上げつつ品質を保つためのフロントエンド開発
apple_yagi
1
870
Other Decks in Technology
See All in Technology
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
480
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
510
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
データ分析エージェント Socrates の育て方
na0
6
1.9k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Scaling GitHub
holman
463
140k
Rails Girls Zürich Keynote
gr2m
95
14k
A better future with KSS
kneath
239
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Speed Design
sergeychernyshev
32
1.1k
How to train your dragon (web standard)
notwaldorf
96
6.2k
KATA
mclloyd
32
14k
Designing for Performance
lara
610
69k
Site-Speed That Sticks
csswizardry
10
820
Transcript
PR TIMESにおける Next.js と cache の付き合い方
自己紹介 やなぎ(25歳) PR TIMES 開発部 フロントエンドエンジニア - X(Twitter): @apple_yagi
話すこと 1. PR TIMESのNext.js運用構成 2. 3つのキャッシュ戦略 3. Next.jsとの付き合い方 4. まとめ
PR TIMESのNext.js運用構成
Next.jsの運用構成 引用元:https://developers.prtimes.jp/2023/12/13/replace-press-release-page-with-nextjs/
Pages Router or App Router - PR TIMESではPages Routerを使用している -
そのため、Next.jsでキャッシュを持つことは一切していない
3つのキャッシュ戦略
PR TIMESでNext.jsから配信されているページ - トップページ - プレスリリース掲載ページ - キーワード検索ページ
PR TIMESでNext.jsから配信されているページ - トップページ - プレスリリース掲載ページ - キーワード検索ページ
トップページ(https://prtimes.jp)
トップページのキャッシュ戦略 - Cache-Controlヘッダーは no-cache, max-age=0, must-revalidate - ブラウザにはキャッシュを持たせない - ただBFCacheは有効にしたいので
no-store はつけない - Surrogate-Controlヘッダーは max-age=5, stale-while-revalidate=10 - Surrogate-ControlヘッダーはFastly独自のヘッダーで Cache-Controlと同じ内容を渡すことができる - FastlyはCache-ControlよりもSurrogate-Controlを優先し、Fastly にのみキャッシュが保存される
キャッシュTTLの設定について Surrogate-Control: max-age=5, stale-while-revalidate=10 - キャッシュは最大で15秒しか保持しない - max-age=5:5秒間はキャッシュを返す - stale-while-revalidate=10:5秒が過ぎた後の10秒間は古いキャッ
シュを返しつつ、新しいキャッシュを生成する
なぜ15秒しか保持しないのか PR TIMESのトップページには新着プレスリリースが表示されており、プレス リリースが配信されたら、できるだけ速く反映したい
キャッシュTTLが1つのコンテンツに引っ張られる問題 プレスリリースのランキングなど、データの更新頻度があまり高くない箇所も APIからデータを取得しHTMLを生成する必要がある 更新頻度:低 更新頻度:高
App Routerを使うことで解決できそう App Routerでコンポーネントをキャッシュをすることで解決することができそう - use cacheディレクティブ良さそう ただApp Routerがキャッシュを持つのは考えることが多い -
self hostingの場合、Next.jsのキャッシュをどこに置くかが難しい - 多段キャッシュになり挙動を正確に把握するのが困難になり、キャッシュを 簡単に削除することができなくなる - キャッシュは単一の箇所で行いたい(PR TIMESでいうとCDN層)
そもそもトップページのキャッシュヒット率は良い - キャッシュヒット率は90 ~ 99%で推移 - Lighthouseのパフォーマンスは100%(キャッシュHit時/通信環境による)
トップページのキャッシュ戦略まとめ - キャッシュTTLは短め(最大15秒) - ただキャッシュヒット率は良い - URLが単一( https://prtimes.jp )でかつ、リクエスト数が多 いからと考えている
- パフォーマンスも良い - 90%以上のリクエストをCDNで返せているため
PR TIMESでNext.jsから配信されているページ - トップページ - プレスリリース掲載ページ - キーワード検索ページ
プレスリリース掲載ページ
プレスリリース掲載ページのキャッシュ戦略 - Cache-Controlは no-cache, max-age=0, must-revalidate - トップページと変わらずブラウザキャッシュはしない - Surrogate-Controlは
max-age=60, stale-while-revalidate=120 - 最大で180秒キャッシュを保持する
キャッシュTTLについて - 一度配信されたプレスリリースの更新頻度はとても少ないが180sと短い - プレスリリースが更新された時にキャッシュをパージする処理をして いないため、更新された時のことを考えてこの設定にしている - 今後はプレスリリース更新時にCDN(Fastly)のキャッシュをパージする 処理を追加し、キャッシュTTLを伸ばす予定 -
Fastlyのキャッシュパージは高速(Instant Purge) - 150ms以内にグローバルに分散されたキャッシュを削除できる - また実行回数による課金はなく、回数制限もない
キャッシュヒット率とパフォーマンス - キャッシュヒット率は26 ~ 56%で推移 - Lighthouseのパフォーマンスは95%
プレスリリース掲載ページのキャッシュ戦略まとめ - キャッシュTTLは180秒 - URLがプレスリリースによって異なるため、キャッシュヒット率は トップページより低い - キャッシュヒットした時のパフォーマンスは良い - 今後キャッシュTTLを伸ばし、キャッシュヒット率の改善を行う予定
PR TIMESでNext.jsから配信されているページ - トップページ - プレスリリース掲載ページ - キーワード検索ページ
キーワード検索ページ
キーワード検索ページのキャッシュ戦略 - Cache-Controlは no-cache, max-age=0, must-revalidate - 変わらずブラウザキャッシュはしない - Surrogate-Controlは設定していない
なぜキーワード検索ページはキャッシュしないのか - 検索するキーワードが完全一致することは多くないと想定している - https://prtimes.jp/main/action.php?run=html&page=searchkey &search_word=PRTIMES - キャッシュをするとしても1分程度を考えているため、1分間の間に何 回同じキーワードが検索されるか?を考えるとする必要がなさそう
パフォーマンス - Lighthouseのパフォーマンスは100% - キャッシュがなくてもそもそもパフォーマンスが良かった
パフォーマンス以外でのキャッシュの有効性 - オリジンサーバーへの負荷を軽減 - リクエストを前段のCDNで返すことにより、そもそもNext.jsにリク エストを到達させなくできる - プレスリリース掲載ページはSNSからの流入で急激に高負荷になるこ とがあるため(バズった時)、キャッシュを用いてアクセスを捌く必 要がある
Next.jsとの付き合い方
Next.jsの機能をほぼ使っていない - getServerSidePropsのみしか使っていない - LinkコンポーネントやuseRouterなどは使わずにハードナビゲーション を行っている - PR TIMESはパフォーマンスが良いため、ハードナビゲーションでも 問題ない
- また、ソフトナビゲーションを行うとFastlyでキャッシュをパージ するときに問題が発生する可能性がある - next/imageも使用しておらず、FastlyのImage Optimizerで画像の最適 化を行っている
Next.jsに求めているもの - 開発者体験(DX)の良いテンプレートエンジン - Reactをサーバーでレンダリングしてくれる、それだけで良い - とは言いつつ、zero configやFile-Based Routingは嬉しい -
キャッシュはFastlyでやるのでwebpackをどうにかしてくれると。。 - Viteを使いたいのでReact Router v7(Remix)に移行しようか迷っ ている - ずっとPages Routerを使い続けるのは。。
まとめ
まとめ - Next.jsをセルフホスティングで運用しFastlyでキャッシュを行っている - キャッシュ戦略はページの特性によって都度変えている - CDNのキャッシュだけでも高パフォーマンスで高負荷に耐えることができ る - Next.jsの機能は最小限の利用に留めつつ、他のフレームワークへの乗り
換えも検討している