CDN・エッジキャッシュとは？Vercelのエッジネットワークの活用

はじめに

「CDNを導入するとサイトが速くなる」という話はよく聞くが、「CDNが何をしているのか」「エッジキャッシュとは何か」「Vercelのエッジネットワークは何が違うのか」を正確に理解している担当者はあまりいらっしゃらないかと思います。

本記事では、CDN・エッジキャッシュの仕組みを基礎から解説し、Vercelのエッジネットワークが現代のWebサイトのパフォーマンスにどう貢献するかを整理します。

CDNとは

CDN（Content Delivery Network：コンテンツデリバリーネットワーク）とは、世界の複数の地点に分散配置されたサーバー群を通じて、ユーザーに近い場所からコンテンツを配信する仕組みです。

CDNがない場合

すべてのアクセスが「オリジンサーバー」（サイトが実際に稼働しているサーバー）に集中します。

問題1：地理的な遅延

東京にあるサーバーに大阪・北海道・海外からアクセスする場合、物理的な距離に比例した通信遅延（レイテンシ）が発生します。光の速度でも東京〜ニューヨーク間は往復約170ミリ秒かかります。

問題2：集中によるサーバー負荷

アクセスが集中すると、サーバーの処理能力が限界に達してレスポンスが遅くなります。

CDNがある場合

CDNは「エッジサーバー」（ユーザーに近い場所のサーバー）のネットワークを持ち、コンテンツをキャッシュして配信します。

メリット1：地理的な遅延の削減

東京のユーザーには東京のエッジから、ニューヨークのユーザーにはニューヨークのエッジから配信されます。

メリット2：オリジンサーバーへの負荷削減

キャッシュされたコンテンツはエッジが直接配信するため、オリジンサーバーへのリクエストが大幅に減ります。

メリット3：可用性の向上

オリジンサーバーに障害が発生してもキャッシュから配信できる場合があります。

エッジキャッシュの仕組み

キャッシュとは

キャッシュとは「一度取得したデータを保存しておき、再度のリクエスト時に保存データを返す」仕組みです。CDNのエッジサーバーは、オリジンサーバーから取得したコンテンツを一定期間キャッシュして、次以降のリクエストにはキャッシュから応答します。

Cache-Controlヘッダー

どのコンテンツをどのくらいの期間キャッシュするかは、HTTPレスポンスヘッダーの Cache-Control で制御されます。

• public：CDNでキャッシュ可能

• max-age=31536000：1年間（秒単位）キャッシュを保持

• immutable：コンテンツが変更されないことを示す（再検証を省略）

コンテンツ種別ごとのキャッシュ戦略

Vercelのエッジネットワーク

概要

Vercelは世界100か所以上のエッジネットワークを持ち、Next.jsアプリをデプロイするだけで自動的にこのエッジネットワークを通じてコンテンツが配信されます。

Next.jsとVercelの統合による最適化

静的アセットの自動CDN配信

JavaScriptバンドル・CSS・画像等の静的ファイルは、ビルド時に自動的にVerlcelのCDNにデプロイされ、グローバルに配信されます。

SSG/ISRページのエッジキャッシュ

Next.jsで静的生成（SSG）またはISRで生成されたHTMLは、Vercelのエッジネットワークでキャッシュされます。世界中どこからアクセスしても、最寄りのエッジから即座にHTMLが返されます。

Edge Runtime（エッジ関数）

通常のNode.jsサーバー関数と異なり、エッジ関数はVercelのエッジネットワーク上で直接実行されます。ユーザーに地理的に近い場所で処理が行われるため、API応答のレイテンシを大幅に削減できます。

VercelのエッジキャッシュとNext.jsの連携

キャッシュの自動管理

Vercelはデプロイのたびに自動的にキャッシュを更新します。「古いキャッシュが残って古いコンテンツが表示される」という問題を自動的に解決します。

コンテンツ更新時の動作（ISRの場合）

• ヘッドレスCMSでコンテンツを更新

• CMSがWebhookでVercelに通知

• VercelがNext.jsのOn-Demand Revalidationをトリガー

• 更新されたページのHTMLが再生成され、エッジキャッシュが更新されます

• 次のリクエストから新しいコンテンツが配信されます

On-Demand Revalidation（オンデマンド再検証）

ISRの「定期的な再生成」に加え、特定のタイミングでキャッシュを即座に無効化・更新する機能です。

CMSからWebhookを受け取った際にこのAPIを呼び出すことで、コンテンツ更新をリアルタイムに近い形でサイトに反映できます。

CloudflareとVercelの比較

CDNサービスとして広く使われているCloudflareとVercelを比較します。

Next.jsを使ったプロジェクトであれば、VercelのネイティブCDNが最も少ない設定で最大のパフォーマンスを発揮できます。

CDNを使っていない場合に起きていること

CDNを使わずにレンタルサーバー・VPS等に直接デプロイしている場合、以下の問題が発生している可能性があります。

• 海外からのアクセスが遅い（グローバル展開のあるBtoBサイト等で問題）

• アクセス集中時にサーバー負荷が高まり遅くなります

• TTFBが長い（サーバーからレスポンスが来るまでの時間が長い）

• PageSpeed InsightsでTTFBの改善が提案されています

まとめ

CDNはユーザーに近い場所のエッジサーバーからコンテンツを配信することで、地理的な遅延・サーバー負荷・可用性の3つの問題を解決します。

VercelはNext.jsと深く統合されており、SSG/ISRページのエッジキャッシュ・静的アセットのCDN配信・エッジ関数によるサーバーレス処理が設定なしで利用できます。これがVercel＋Next.jsで高いCore Web VitalsスコアとLCPを実現できる主要な理由です。

あわせて読みたい

• サイト表示速度とは（UXとSEOへの影響）｜サイト表示速度とは何か、なぜUXとSEOの両方に影響するのかを解説

次の記事では、多くのWebサイトで問題になっているWordPressの速度問題と改善策を解説します。