Better swyxkit caching on Netlify using GitHub webhooks
swyx
we previously used HTTP header Cache-Control values to set caches for pages, which improves performance at the cost of up to 1hr of staleness:
this was an okay tradeoff, but the real story was worse; pages would sometimes fail to prerender and randomly throw 500 errors:
it also turns out that
edge caching on Netlify CDN is scoped at a specific edge node. Visitors hitting different nodes also trigger regeneration.
so this basically generates much more renders than needed.
thanks to #222 we have a solution based on github webhook invalidation and better Netlify global caching.
the cost is more setup, and especially Netlify specific setup. for this project that’s an acceptable tradeoff but if you’re using this somewhere else you should be warned.
To set the webhook:
In your Netlify project, set the environment variables:
GH_TOKEN
(needed anyway)USE_NETLIFY_CACHE
totrue
GH_WEBHOOK_SECRET
to a unique secret string (you can get one by e.g. runningopenssl rand -base64 32
in your terminal) After setting these variables, re-deploy your site.
In your GitHub repo, create a new webhook:
- Set the URL to
https://<your domain>/api/issued-changed
- Select the content type
application/json
- Set the secret
- Under “Which events would you like to trigger this webhook?” - check “issues” and un-check “push”.
When you save your webhook, GitHub would trigger the endpoint with a special event type (“ping”) - which should be accepted by the endpoint if all is ok. Then, any change to issues (add, edit, delete, label, unlabel, …) should trigger the webhook, causing your site’s relevant cached content to be invalidated.