Vercel Proプランの料金体系の変更とNext.js での対策に関して

ピン留めされたアイテム

Twitterにてタイトルに関して指摘をいただきました。

確かに値上げではなく、「利用上限を超えた場合の従量課金体系の追加」が正しいため、タイトルを変更しました。

ただ、従量課金の金額はベース料金と比較した場合に比率がかなり大きいため、次回の請求サイクルに入る前に、自身の利用状況を確認することをおすすめします。

2021/10/06
Vercel よりメールで、Proプランにおける使用上限を上回った際の追加料金発生に関してアナウンスがあった。

Hi there,

Your team, on the Vercel Pro plan is now able to purchase extra usage as needed. This allows greater flexibility for teams who don't need the support and security of an Enterprise plan. Your team continues to have 1TB Bandwidth, 1000 GB-hours of functions, and 5000 optimized images included in each billing cycle.

On your billing statement ending Tuesday, November 16, 2021, extra usage will automatically be charged to your team at the following rates:
Bandwidth: 55 USD per 100 GB beyond 1TB
Serverless Invocations: Unlimited
Serverless Functions: 55 USD per 100 GB‐hours
Image Optimization: 9 USD per 1000 optimized images beyond 1000 optimized images

こんにちは。
Vercel Proプランをご利用のお客様は、必要に応じて使用量を追加購入できるようになりました。これにより、エンタープライズプランのサポートやセキュリティを必要としないチームに、より柔軟に対応できるようになりました。なお、1TBの帯域幅、1,000GBの機能、5,000枚の最適化されたイメージは、引き続き各請求サイクルに含まれています。

2021年11月16日（火）締めの請求書では、追加使用分が以下の料金で自動的にお客様のチームに請求されます。
帯域幅：1TBを超えて100GBごとに55米ドル
サーバーレスの起動。無制限
サーバーレス・ファンクション 100GB時間あたり55米ドル
画像の最適化：最適化された画像1,000枚ごとに9米ドル、最適化された画像1,000枚以上

aiji42

Proプランのベース料金が 20USD/month (1ユーザ&1パイプライン)
この20USDで

トラフィック: 1TB
画像最適化枚数: 5,000枚
サーバレスの実行: 1,000GB hour

が与えられる。(チームメンバーを増やすたびに20USDずつ増えるが、制約の上限は変わらない)

この上限を月内に超えた場合に、

トラフィック: 100GB超ごとに55USD
画像最適化枚数: 1,000枚超ごとに9USD
サーバレスの実行: 1,00GB hour超ごとに55USD

の追加料金が次回の請求サイクル徴収される。

aiji42

商業利用でVercelを利用する場合、Hobbyプランは禁止されているので、もれなく Proプラン以上となる。
Proの次はエンタープライズで、基本的にすべての制約上限と料金がカスタム(セールスとの相談)となる。

これまで、

トラフィック: 1TB

画像最適化枚数: 5,000枚

サーバレスの実行: 1,000GB hour

これらの制約はあくまでフェアユース条件であり、これを少し超過したからといって、すぐさま連絡が来たりサイトが停止するということはなかった。(ただしHobbyの場合は一時的にサービス停止になるらしい)

そもそもフェアユースに関するドキュメントがあまり表立ったところにはリンクされていなかったので、知らなかった人も一定いるはず。

今回の変更に伴い、Pricingページもアップデートされ、上記上限が細かく明記された。
https://vercel.com/pricing

aiji42

気づかず来月から急に高額な料金を請求されたとならないように、過去に私が Next.js のプロジェクトで行った対策をいくつか述べる。

aiji42

next/link を使用する際の注意(トラフィック削減)

デフォルトでは prefetch が有効になる。
prefetch が有効な状況においては、href が同一プロジェクトのURLである場合に、ブラウザの表示領域にあるすべての Link がフェッチされる。気をつけないとこれがトラフィック増につながる。
prefetch={false} にすることで、マウスオーバーしたときのみに制限できる(完全オフにはできない)

遷移先が SSG/ISR である場合は、プリフェッチしなくとも十分に高速であるはずなので、問題がなければ通常のアンカータグの利用に切りかえることも考慮すべき。
ただし、遷移先が Dynamic Routing の同一ファイルである場合、Link を使えば page props のみ fetch して再描画するエコシステムになっているので、どちらが効率が良いかはケースによる。

aiji42

next/image を使用する際の注意(画像最適化枚数の削減)

next/image を使用する際、unoptimized props や loader props を与えない限りは、外部ドメインの画像であっても、Vercel の ImageOptimize を通ることになる。
画像の最適化はCoreWebVitalsのスコアに直結するので本来積極的に使用したいところではある。

Imgix, Cloudinary, Akamai の外部サービスであれば、next.config.jsで指定するだけで、かんたんに利用できるので、料金を比較した上で戦略的に選択しても良い。

画像をS3においている場合、CloudFront + LambdaEdge を前段に用意して自前で ImageOptimize の機能を作ってもよし。

ただし、その場合 Image コンポネントの loader にコールバックを渡さないといけなくなり、サイト全体で対応するのは骨が折れるので、こういったカスタムローダーを一括で渡せるプラグインを使用することをおすすめする。

aiji42

使用状況の監視

Vercel ウェブコンソールの Usage のタブから確認ができるので、定期的にウォッチしておくと良い。

請求サイクルのスコープで絞って確認可能。