Some context first

The stack powering this blog is Next.js, GraphCMS and Vercel(for hosting). Consider this post as the setting stone of a reverse chronological project walkthrough.

While setting up the blog, I initially had some placeholder content, tweaking it ever so slightly. With every push to the main branch, Vercel was auto triggering the build step, and generating static blog pages.

But once the code for the blog is set, when we've got nothing to push, what will trigger the build when we create or update a new post ?

There comes - Incremental Static Regeneration(ISR). ISR hits the sweet spot between server-side rendering and static generation. A simple "revalidate" property, tells Next.js to be ready to regenerate the page after the first request comes in after a defined time. (more on this in later posts)

While searching for other ways to trigger such builds, I stumbled upon "Webhooks".

Coming to the point

Webhooks provide a way for web applications to communicate with each other. Sounds familiar ? Sounds just like an API, right ? We'll cover the difference shortly.

Analogy: Your blog needs to stay in sync with the posts on a CMS server. You expose a webhook URL from your blog host to the CMS server. Now when you create a new post or update existing ones on the CMS, your blog host gets notified of the changes, in turn rebuilding the blog with those changes.

A robust implementation of webhooks could be seen on the cloud communication platform, Twilio. They use it to handle events like incoming SMS or calls. Summarized snippet from Twilio docs:

When an event occurs, Twilio makes an HTTP request (usually a POST or a GET) to the configured webhook URL. The payload includes event details such as the incoming phone number or the body of an incoming message.

API vs Webhook - difference in fetching

APIs are based on a process called Polling, where your application has to regularly request the end-point for data/updates, like you pinging Netflix to check what is the state of Money Heist Season 5's premiere.

Whereas, Webhooks are based on Pushing, i.e. the end-point will instantly update or "push" data to your app when expected events occur, like Netflix announcing to you that Season 5 will be out on September 3rd 😎.

Yes, APIs are more resource intensive than Webhooks since there is a need to constantly listen for changes. But there are many factors going into deciding on them, which are out of this post's scope.

Other platforms supporting webhooks are: GitHub, Slack, Discord etc. A handy use case would be using GitHub-Slack webhook integration to configure an alert message for your team when events like prod deployment, PRs get triggered.

Configuring Vercel-GraphCMS webhook integration

Config at Vercel end

In the Settings console of your Vercel project config page, under Git section, you'll find Deploy Hooks space, with Create Hook option, then

• Give a (discernible) name to the hook
• Enter the Git Branch from which you want to trigger the build (regeneration)

Config at GraphCMS end

Under the Webhooks section, tap the Create button to launch the config window. Plug in the Vercel Webhook URL, then select the Triggers, in this case:

• Content Model (you want to listen for changes)
• Stage [draft/published] (of the content which you want to listen to)
• Action (PUBLISH/UNPUBLISH) which are basically the events, which when changed/updated will trigger the build at Vercel.

And there you go. Now, with every change you make to the content, it will trigger a regeneration of your blog/application.

Credit where credit is due:

• Vero Blog
• Official Vercel docs
• Zapier Blog

Have a good one. Bye.