にょっす速報🐮✋

@vercel/og を大量のページで運用する際の課題と解決策

この記事の目次

@vercel/og を大量のページで運用する際の課題と解決策

1. @vercel/og の動作と料金プランの制限

@vercel/og を使用すると、動的に Open Graph（OG）画像を生成できます。しかし、大量のページで運用する場合、Vercel の Edge Functions の実行回数制限に注意が必要です。

Hobby プラン（無料）

  • Edge Functions の実行回数: 1,000回/月
  • ストレージ容量: 100MB/月
  • CDN キャッシュは利用できるが、Vercel 側の管理で削除される可能性あり

Pro プラン（$20/月）

  • Edge Functions の実行回数: 1,000,000回/月
  • ストレージ容量: 1GB/月

2. Hobby プランで大量の OG 画像を運用すると何が起こるか？

  • 1,000回の制限にすぐ達する → エッジ関数が使えなくなる
  • Vercel の CDN キャッシュが削除されると 再生成が必要になり負荷が増える
  • URL パラメータが異なるたびに 新しい画像が生成される → キャッシュの効果が限定的

3. 解決策

1. Cloudinary や S3 に保存して API の負荷を減らす

初回リクエストで @vercel/og で生成した画像を Cloudinary や S3 にアップロードし、それ以降は保存済みの画像を返す 方式にする。

手順:

  1. @vercel/og で動的に生成
  2. Cloudinary や S3 にアップロード
  3. 以降のリクエストはアップロード済みの画像を返す

2. キャッシュを工夫して Edge Functions の実行を抑える

Vercel の CDN キャッシュを活用し、エッジ関数の実行を最小限に抑える。

return new ImageResponse(
  <div>OG Image</div>,
  {
    width: 800,
    height: 400,
    headers: {
      'Cache-Control': 'public, max-age=31536000, immutable', // 1年キャッシュ
    },
  }
);

3. Next.js の ISR（Incremental Static Regeneration）で静的ファイル化

OG 画像の生成を API に頼らず、Next.js の getStaticProps や getServerSideProps で 事前生成し、静的ファイルとしてホスティング すれば、Vercel の Edge Functions を一切使わずに運用できる。

手順:

  1. 記事ごとに /public/og-images/[slug].png を作る
  2. og:image にその画像 URL を指定する
  3. 動的生成を減らす
export async function getStaticProps({ params }) {
  const imageUrl = `/og-images/${params.slug}.png`; // 事前に作成した画像を利用
  return { props: { imageUrl } };
}

4. どの方法を選ぶべきか？

サイト規模解決策
小規模（数百ページ）Hobby プラン + キャッシュ最適化
中規模（数千ページ）Pro プラン + S3/Cloudinary 保存
大規模（数万ページ）ISR で事前生成 + CDN 配信

5. まとめ

  • Hobby プランで大量ページの動的OG画像生成は厳しい（すぐに制限到達）
  • 解決策
    1. Cloudinary/S3 へ保存して API の負荷を減らす
    2. キャッシュを工夫して Edge Functions の実行を抑える
    3. Next.js の ISR で静的生成し、そもそも API を使わない
    4. Pro プラン（月$20）を検討する

大量のページで @vercel/og を使う場合は、事前に運用コストと仕組みを考えておくことが重要！

);

コメント(0件)

トピックス