How to use HTTP caching?

[mattcroat]

From what I understand you can set a HTTP Cache-Control header on a document so it gets slurped by a CDN and returns the document to avoid doing work on the server when using server-side rendering.

This is confusing when it comes to SvelteKit and having page endpoints and standalone endpoints because they work differently.

// page endpoint

export async function get() => {
  const data = await getData()
  
  return {
    body: data,
    headers: {
      'Cache-Control': 'max-age=0, s-maxage=60'
    }
  }
}

If you don't have knowledge of page endpoints and how they use __data.json to pass data to the component you would think this doesn't work if you look at the document itself.

// standalone endpoint

<script context="module">
  export async function load({ fetch }) {
    const response = await fetch('data.json')

    return {
      props: {
        data: await response.json()
      },
      cache: { maxage: 60 },
    }
  }
</script>

This works how I expect and puts a Cache-Control header on the document.

I'm confused because this seems to defeat the purpose of using page endpoints to reduce boilerplate when you can't set Cache-Control headers on the document.

Do I pass the props and use load?

// standalone endpoint

<script context="module" lang="ts">
  export async function load({ props }) {
    return {
      props,
      cache: { maxage: 60 },
    }
  }
</script>

Am I missing something or doing it wrong?

Thank you! 😄

[kristjanmar]

I'm interested in a solution to this as well. Setting cache-control headers inside a page's endpoint does not work, it only caches the __data.json path but has no effect on the html document for the page itself.

[mattcroat]

You have to pass props from the page endpoint to the load function and then you can set the cache options for the document but I wish you could set any headers for the document instead of being limited to using maxage.