大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について

at ジャムスタックチョットデキル!! シブヤ!!

大規模メディアにてOn-demand ISRとISRの費用対効果についてお話しさせていただきました。

ちょっと株式会社
https://chot-inc.com/

ジャムスタックチョットデキル!! シブヤ!!
https://chot.connpass.com/event/272088/

Transcript

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