plentico / plenti

Static Site Generator with Go backend and Svelte frontend
https://plenti.co
Apache License 2.0
985 stars 50 forks source link

Fingerprint SPA to bust cache #295

Closed jimafisk closed 7 months ago

jimafisk commented 8 months ago

Following up on an earlier comment https://github.com/plentico/plenti/issues/191#issuecomment-1374868105. We should auto-generate a hash that could be used to store the clientside app. Each time a new build is made the folder name will change and invalidate the previously cached app. This will fix issues where the correct HTML loads initially, but then the app hydrates and it shows the previously cached version (as seen here). In the future it would be great to only bust the cache for the specific files that changes, but for now this might be the quickest / easiest approach.

jimafisk commented 7 months ago

This is available in v0.6.29.

Important: This API is subject to change (might end up using different variable names).

You can set this in plenti.json like:

{
  "entrypoint_js": ":fingerprint"
}

Note that if you omit the entrypoint_js key, it defaults to spa for backwards compatibility.

Also, we also renamed the former entrypoint key to entrypoint_html to avoid conflicts - currently this isn't being used because using a dynamic svelte component in router.svelte was throwing console errors.

If using :fingerpring, the value is dynamic so you'll want to set it using magic prop env.entrypointJS in your <head> like:

<script type="module" src={`/${env.entrypointJS}/core/main.js`}></script>

Now on every build the JS scripts will get a unique folder name in the format of a random 10 character string (e.g. XwlUjkLudT)