Better swyxkit caching on Netlify using GitHub webhooks

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:

Image

this was an okay tradeoff, but the real story was worse; pages would sometimes fail to prerender and randomly throw 500 errors:

Image

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 to true
  • GH_WEBHOOK_SECRET to a unique secret string (you can get one by e.g. running openssl 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.


    Reactions: 👍 1
    Loading comments...

    Subscribe to the newsletter

    Get emails from me about Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero, ducimus..

    5,432 subscribers including my Mom – 123 issues

    Latest Posts

    Search and see all posts