$30 off During Our Annual Pro Sale. View Details »

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

hanetsuki
February 22, 2023

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

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

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

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

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

hanetsuki

February 22, 2023
Tweet

More Decks by hanetsuki

Other Decks in Technology

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