Slide 1
Slide 1 text
Jamstackチョットデキル
大規模メディアにおけるNext.js
とVercelのレンダリングとキャッ
シュ戦略について
hanetsuki｜chot Inc.
Slide 2
Slide 2 text
自己紹介
hanetsuki
TWITTER: @hantsuki_dev
#TypeScript #Next.js #AB型 #2児の父 #日本酒
#アニメ・エンタメ #イラスト #漫画 #ゲーム
最近は、「ぼっち・ざ・ろっく」を周回視聴したり、
「スプラトゥーン3」「ホグワーツ・レガシー」をプレイ
したりしている。
Slide 3
Slide 3 text
VercelとNext.jsで使える
レンダリングについておさらい
Slide 4
Slide 4 text
ISR 速報性を重視するページなら
SG 速報性を重視しないページなら
SSR 動的な処理を実施したいなら
Slide 5
Slide 5 text
メディアサイトの要件
速報性を重視する。
そのために、 を60sに設定したISR
を多く利用しました。
revalidate
Slide 6
Slide 6 text
月間3000万PVの罠
Slide 7
Slide 7 text
月間3000万PVの罠
ISRの裏側のページビルドは、
Serverless Function Executionに加算される。
VercelのProプランでは、
1000 GB-Hrsを超えた場合、
100 GB-Hrsあたり$40の従量課金になります。
Slide 8
Slide 8 text
月間3000万PVの罠
日におおよそ、250 GB-Hrs
これが、30日で7500 GB-Hrs
1000 GB-Hrsを超えた場合、100 GB-Hrsあたり
$40追加なので$2600
為替レート135円を想定すると
ランニングコストは351,000円/月
Slide 9
Slide 9 text
どう考えてもやばい...
Slide 10
Slide 10 text
速報性を重要視するためのもう一つの施策
On-demand ISR
Slide 11
Slide 11 text
On-demand ISRとは何か？
任意のタイミングで、SG, ISRされたコンテン
ツのCDNキャッシュをパージしてページを生
成しますという機能。
https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-
demand-revalidation
Slide 12
Slide 12 text
On-demand ISRを適応した結果
日におおよそ、60 GB-Hrs
これが、30日で1800 GB-Hrs
1000 GB-Hrsを超えた場合、100 GB-Hrsあたり
$40追加なので$320
為替レート135円を想定すると
ランニングコストは43,200円/月
Slide 13
Slide 13 text
比べてみると...
$2600
$320
為替レート135円を想定して
約30万円のコストダウン
Slide 14
Slide 14 text
いや〜ホッとしました。
Slide 15
Slide 15 text
速報性を意識するなら最初から
On-demand ISRを視野に入れよう。
お客さんのニーズで言うところの速報性は、
通常のISRでは完全には補えない。
まとめ
Slide 16
Slide 16 text
ご清聴ありがとうございました