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