Headless CMS Webhooks: Real-Time Content Updates Explained

What Are Webhooks?

Webhooks are HTTP callbacks that your CMS sends to a URL you specify when content events occur. When you publish a post, the CMS sends a POST request to your webhook endpoint with the event details — allowing your frontend to update immediately instead of waiting for a cache to expire.

Common Webhook Events

• post.published — A post was published or updated
• post.deleted — A post was removed
• post.updated — Content was edited
• media.uploaded — New media file added

Security: HMAC Signatures

Webhooks must be verified to prevent unauthorized requests. The standard approach is HMAC-SHA256 signing:

// Verify webhook signature\nconst signature = request.headers["x-rankflo-signature"];\nconst expected = crypto\n  .createHmac("sha256", WEBHOOK_SECRET)\n  .update(body)\n  .digest("hex");\nif (signature !== expected) return new Response("Unauthorized", { status: 401 });

ISR Revalidation Pattern

The most common webhook use case: trigger Next.js ISR revalidation when content changes.

// app/api/revalidate/route.ts\nexport async function POST(req) {\n  // Verify HMAC signature...\n  const { slug } = await req.json();\n  revalidatePath(`/blog/${slug}`);\n  return Response.json({ revalidated: true });\n}

This gives you the performance of static generation with near-real-time content updates.

Best Practices

• Always verify HMAC signatures
• Respond with 200 quickly — do heavy processing asynchronously
• Implement retry logic for failed deliveries
• Log webhook deliveries for debugging