# Cachebust when publishing **URL:** \ **Category:** Technical Questions\ **Tags:** nextjs\ **Created:** [August 14, 2024, 7:32pm UTC](https://forum.builder.io/t/cachebust-when-publishing/6122 "2024-08-14T19:32:14Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![tlee-pb](https://avatars.discourse-cdn.com/v4/letter/t/7ba0ec/32.png) [@tlee-pb](https://forum.builder.io/u/tlee-pb)\ **Post date:** [August 14, 2024, 7:32pm UTC](https://forum.builder.io/t/cachebust-when-publishing/6122/1 "2024-08-14T19:32:14Z")
_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._ **Builder content link** > **[Product Management Software | Productboard](https://pb-website-next.vercel.app/dummy/)** > > Productboard is a suite of product management software tools that helps product managers understand customer needs, prioritize features & rally everyone around the roadmap. Free 15-day trial. **Builder public api key** 1d8ecee591ac4358befb8fe998100548 **What are you trying to accomplish** - I am exploring ways to perform cachebust only when page is published, because this would decease our build time on Vercel. By directing enabling cachebust, during the build time, Vercel would generate all the static pages. - in NextJs, there is a way to skip static page generation during build ([see docs](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths)), but this approach does not seem to work with Builder SDK. **Code stack you are integrating Builder with** NextJs 🙏 ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [August 15, 2024, 10:37am UTC](https://forum.builder.io/t/cachebust-when-publishing/6122/2 "2024-08-15T10:37:37Z")
Hello @tlee-pb, To dynamically cachebust with Builder only when a page is published, you can leverage Builder’s webhooks along with your Next.js setup. Here’s how you can set it up: ### Step 1: Set Up the Webhook in Builder 1. **Create a Webhook in Builder** : 2. **Webhook Configuration** : ### Step 2: Create a Webhook Handler in Next.js 1. **Create an API route** : `pages/api/webhook.js` - This API route will handle incoming webhook requests from [Builder.io](http://Builder.io). ```jsx // pages/api/webhook.js export default async function handler(req, res) { if (req.method === 'POST') { const { newValue, previousValue } = req.body; if (newValue && newValue.published === 'published') { // This signifies that a page has been published await res.revalidate('/'); } return res.status(200).json({ message: 'Webhook received and processed' }); } else { res.setHeader('Allow', ['POST']); return res.status(405).end(`Method ${req.method} Not Allowed`); } } ``` ### Step 3: Modify Your Next.js Configuration 1. **Configure revalidation** : - This ensures that your pages are revalidated and the cache is invalidated when the webhook is called. ```javascript // next.config.js module.exports = { async redirects() { const { builder } = require('@builder.io/sdk'); return builder .getAll('url-redirects', { apiKey: 'YOUR_API_KEY', options: { noTargeting: true }, cachebust: true, }) .then(results => results .filter(content => { const data = (content || {}).data || {}; return !!(data.sourceUrl && data.destinationUrl); }) .map(({ data }) => ({ source: data.sourceUrl, destination: data.destinationUrl, permanent: !!data.redirectToPermanent, })), (error) => { console.error("Error setting up redirects", error); return []; }, ); }, } ``` 1. \*\* Scheduling and Cachebusing when using Webhooks\*\*: - When your webhook triggers on publish, the provided handler will call `res.revalidate()` on the path(s) that need to be updated. By following these steps, you create an efficient cachebusting mechanism that triggers only on publication, avoiding unnecessary rebuilds and optimizing your build times on Vercel. For more detailed information, visit the respective [cachebust documentation](https://www.builder.io/c/docs/cachebust) and [webhooks documentation](https://www.builder.io/c/docs/webhooks) on [Builder.io](http://Builder.io). ---
**Author:** ![tlee-pb](https://avatars.discourse-cdn.com/v4/letter/t/7ba0ec/32.png) [@tlee-pb](https://forum.builder.io/u/tlee-pb)\ **Post date:** [August 15, 2024, 7:18pm UTC](https://forum.builder.io/t/cachebust-when-publishing/6122/3 "2024-08-15T19:18:57Z")
Hello Manish, Thank you for the prompt reply. The [Cachebust doc](https://www.builder.io/c/docs/cachebust) appears to be broken. Thanks. ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [August 16, 2024, 4:08pm UTC](https://forum.builder.io/t/cachebust-when-publishing/6122/4 "2024-08-16T16:08:44Z")
Hello @tlee-pb, For cachebust, you can refer to the below links ```auto let response = fetch('https://cdn.builder.io/api/v1/html/DOC_ID?apiKey=YOUR_KEY&cachebust=true') // Now you can save and later serve the HTML as you please let html = response.data.html ``` > **[Using webhooks in Builder.io - Builder.io](https://www.builder.io/c/docs/webhooks)** > > Learn how to create webhooks for models in Builder.io so your app is aware of content changes that should trigger any workflows you have on your end. > [@Changes are not happening in real time](https://forum.builder.io/t/changes-are-not-happening-in-real-time/4545): > > have started building pages with Visual editor and having a problem with the changes not in real time. Every time i modify the page i bit, i have to do all the cache cleaning refreshing to see the result. the design i did in the Visual editor and the result after running are not the same