Setting static asset cache TTL in SvelteKit

Question

I am serving font and CSS files from /static using the default SvelteKit application template. I am using SvelteKit Node.js adapter.

The default cache time-to-live (TTL) seems to be 4 hours for /static files. I am not sure if this is set by SvelteKit/Vite itself or does any of the middleboxes like CloudFlare make this assumption.

How can I override this in SvelteKit? I assume this needs to be configured in Vite somehow, so that the /static files are server with correct HTTP caching headers. As the font files do not change, I would like to set them to be immutable and avoid the user web browser redownloading the files again.

I have the exact same question, and I wonder how you solved it. The accepted answer doesn't really explain what you did? It only sets the `public,max-age=31536000,immutable` cache header for files within the `/${manifest.appPath}/immutable/` path, which doesn't include the `/static` folder where my font files are also placed. — Kevin Renskers, Mar 06 '23 at 17:29

score 2 · Accepted Answer · answered Dec 30 '21 at 23:37

The header settings are hardcoded in @sveltejs/adapter-node.

However, the latest @sveltejs/adapter-node@next version contains cache immutability header with cache-control.

/tmp # wget -S "http://localhost:3000/fonts.css"

--2021-12-31 00:35:00--  http://localhost:3000/fonts.css
Resolving localhost (localhost)... 127.0.0.1
Connecting to localhost (localhost)|127.0.0.1|:3000... connected.
HTTP request sent, awaiting response...
  HTTP/1.1 200 OK
  Vary: Accept-Encoding
  Content-Length: 2249
  Content-Type: text/css
  Last-Modified: Thu, 30 Dec 2021 23:34:41 GMT
  ETag: W/"2249-1640907281407"
  Cache-Control: public,max-age=31536000,immutable
  Date: Thu, 30 Dec 2021 23:35:00 GMT
  Connection: keep-alive
  Keep-Alive: timeout=5
Length: 2249 (2.2K) [text/css]

score 0 · Answer 2 · answered Jan 01 '22 at 17:47

0

for those who also came here looking for this you can set the maxage:

<script context="module">
    export async function load({ params, fetch }) {
    //...
        return {
            maxage: 60 // 1 minute
        };
    }
</script>

https://kit.svelte.dev/docs#loading-output-maxage

i am not sure if this works for prerendered pages, probably not.

answered Jan 01 '22 at 17:47

swyx

2,378
5
24
39

5

Your question is different. This question is not about setting TTL for pages, but setting TTL for static assets. I suggest that you post self-answer on a new self-question and I can upvote https://stackoverflow.com/help/self-answer – Mikko Ohtamaa Jan 01 '22 at 19:43

Setting static asset cache TTL in SvelteKit

2 Answers2