Triggering CDN Cache Invalidation With CMS Webhooks

An editor publishes a price correction on your site, refreshes the page ten minutes later, and sees the old price. Your CDN cached the page for an hour. The right fix is targeted cache invalidation triggered by the publish event itself, not a shorter cache TTL that kills your CDN hit rate.

How ContentGrid Webhooks Work

ContentGrid fires a POST request to your registered webhook URL every time an entry is created, updated, or published. The request body contains the entry ID, content type, locale, and the action that triggered it. Your webhook handler decides what to invalidate based on this data.

• Webhooks fire in near-real-time, typically within two seconds of a publish action.
• ContentGrid retries failed webhook deliveries up to five times with exponential backoff.
• Each webhook delivery includes a signature header you can verify to reject forged requests.

Setting Up the Webhook Handler

Create an API route in your Next.js app at /api/cms-webhook:

• Verify the webhook signature using the ContentGrid signing secret from your environment variables.
• Parse the request body to get the entry ID, content type, and action.
• If the action is publish, look up the URL paths that correspond to the entry.
• Call the appropriate invalidation API for your CDN.

For Vercel with ISR, call fetch('/api/revalidate?path=/blog/my-post') from a separate revalidation route, or use the revalidatePath function from next/cache in the webhook handler directly.

Invalidating Vercel Edge Cache

Vercel's On-Demand ISR is the simplest integration:

• In the webhook handler, call revalidatePath('/blog/' + entry.slug) for blog entries.
• Also revalidate index pages: revalidatePath('/blog') so the listing page updates.
• For global content like navigation or site settings, call revalidatePath('/', 'layout') to bust the layout cache.
• Protect the route with a secret token passed as a query parameter.

Invalidating Cloudflare Cache

If your front-end is on Cloudflare Pages or behind Cloudflare's CDN, use the Cloudflare Cache Purge API:

• Build a list of full URLs to purge based on the entry data, e.g., https://yoursite.com/blog/post-slug.
• Send a POST request to the Cloudflare API at /zones/ZONE_ID/purge_cache with the URL list.
• Cloudflare purges those URLs from edge nodes globally within a few seconds.
• Rate limit your webhook handler to avoid hitting Cloudflare API limits on bulk publishes.

Webhook-driven invalidation gives you long cache TTLs (an hour or more) without stale content. The CDN serves content fast the vast majority of the time, and the rare publish event triggers an immediate update. This combination gives better performance and fresher content than a short TTL approach.