大規模メディアにおける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.
   

   View Slide

2. 自己紹介
   hanetsuki
   TWITTER: @hantsuki_dev
   #TypeScript　#Next.js　#AB型　#2児の父　#日本酒　
   
   #アニメ・エンタメ　#イラスト　#漫画　#ゲーム
   最近は、「ぼっち・ざ・ろっく」を周回視聴したり、
   
   「スプラトゥーン3」「ホグワーツ・レガシー」をプレイ
   したりしている。
   

   View Slide

3. VercelとNext.jsで使える
   
   レンダリングについておさらい
   

   View Slide

4. ISR 速報性を重視するページなら
   SG 速報性を重視しないページなら
   SSR 動的な処理を実施したいなら
   

   View Slide

5. メディアサイトの要件
   速報性を重視する。
   
   そのために、 を60sに設定したISR
   を多く利用しました。
   revalidate
   

   View Slide

6. 月間3000万PVの罠
   

   View Slide

7. 月間3000万PVの罠
   ISRの裏側のページビルドは、
   
   Serverless Function Executionに加算される。
   
   
   VercelのProプランでは、
   
   1000 GB-Hrsを超えた場合、
   
   100 GB-Hrsあたり$40の従量課金になります。
   

   View Slide

8. 月間3000万PVの罠
   日におおよそ、250 GB-Hrs
   
   これが、30日で7500 GB-Hrs
   
   1000 GB-Hrsを超えた場合、100 GB-Hrsあたり
   $40追加なので$2600
   
   為替レート135円を想定すると
   
   ランニングコストは351,000円/月
   

   View Slide

9. どう考えてもやばい...
   

   View Slide

10. 速報性を重要視するためのもう一つの施策
    On-demand ISR
    

    View Slide

11. On-demand ISRとは何か？
    任意のタイミングで、SG, ISRされたコンテン
    ツのCDNキャッシュをパージしてページを生
    成しますという機能。
    https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-
    demand-revalidation
    

    View Slide

12. On-demand ISRを適応した結果
    日におおよそ、60 GB-Hrs
    
    これが、30日で1800 GB-Hrs
    
    1000 GB-Hrsを超えた場合、100 GB-Hrsあたり
    $40追加なので$320
    
    為替レート135円を想定すると
    
    ランニングコストは43,200円/月
    

    View Slide

13. 比べてみると...
    $2600
    $320
    為替レート135円を想定して
    
    約30万円のコストダウン
    

    View Slide

14. いや〜ホッとしました。
    

    View Slide

15. 速報性を意識するなら最初から
    
    On-demand ISRを視野に入れよう。
    お客さんのニーズで言うところの速報性は、
    通常のISRでは完全には補えない。
    まとめ
    

    View Slide

16. ご清聴ありがとうございました
    

    View Slide