I have my [...slug].astro page that loads content ok on my local, but when I do a deployment on Vercel, the pages are cached and the content doesn't refresh after there have been content updates on them via Storyblok. I want to have them refreshed and cached until the next content update.
#invalidate cache for a URL: Vercel + Astro + Storyblok.
pallid valley
silver oxideBOT
Hi @pallid valley. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To invalidate the cache for a URL when using Vercel, Astro, and Storyblok, you can use the ISR (Incremental Static Regeneration) feature of Vercel. By default, an ISR function caches for the duration of your deployment. You can control caching by setting an expiration time or by excluding particular routes from caching entirely.
To set an expiration time, you can configure an expiration value in seconds in your astro.config.mjs file:
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
// ...
output: 'server',
adapter: vercel({
isr: {
// caches all pages on first request and saves for 1 day
expiration: 60 * 60 * 24,
},
}),
});
source (https://docs.astro.build/en/guides/integrations-guide/vercel/#isr-cache-invalidation)
To exclude particular routes from caching, you can create a bypass token and provide it to the isr config along with any routes to exclude from caching:
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
output: "server",
adapter: vercel({
isr: {
// A secret random string that you create.
bypassToken: "005556d774a8",
// Paths that will always be served fresh.
exclude: [ "/api/invalidate", "/posts/[...slug]" ]
}
})
})
source (https://docs.astro.build/en/guides/integrations-guide/vercel/#isr-cache-invalidation)
To ensure your site is rebuilt when content changes in Storyblok, you can set up a webhook in Storyblok to trigger a new build on your hosting platform (e.g., Vercel) whenever you update or add content Objects.
In your Storyblok space Settings, click on the Webhooks tab. Paste the webhook URL you copied from Vercel in the Story published & unpublished field and hit Save to create a webhook. Now, whenever you publish a new story, a new build will be triggered and your blog will be updated.
source (https://docs.astro.build/en/guides/cms/storyblok/#publishing-your-site)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
pallid valley
how would the webhook URL look like?
and how is the code for the webhook revalidation would look like?
@silver oxide how would the webhook URL look like?
and how is the code for the webhook revalidation would look like?
silver oxideBOT
Let me check the knowledge base for you. One moment! :books:
The webhook URL is generated by your hosting provider, in this case, Vercel. Here's how you can set it up:
- Go to your project dashboard on Vercel and click on Settings.
- Under the Git tab, find the Deploy Hooks section.
- Provide a name for your webhook and the branch you want to trigger the build on. Click Add.
- Vercel will generate a unique URL for this webhook. Copy this URL.
source (https://docs.astro.build/en/guides/cms/storyblok/#publishing-your-site)
As for the code for the webhook revalidation, it's not something you typically need to write yourself. The webhook URL you set up on Vercel will automatically trigger a rebuild of your site when it receives a POST request. This is handled by Vercel's infrastructure.
When you update content in Storyblok and publish it, Storyblok will send a POST request to the webhook URL you provided (the one generated by Vercel). This will trigger a rebuild of your site on Vercel, ensuring your content is up-to-date.