SvelteKit and caching the component output in server-side rendering

Question

I have a SvelteKit landing page component that calculates and displays statistics. Because crunching the numbers out from the database is a heavy job, and this information updates only around an hour or so, I would like to cache the result so that the landing page will be served fast for all the visitors. The statistics are loaded from the backend using a fetch() during route load().

I am using SvelteKit server-side rendering for the page, with Node.js adapter. I can have SvelteKit to connect to SQL, Redis or something else to store the result of caching. I believe even a file-system based cache would work in my case.

Do Svelte and SvelteKit support any kind of server-side rendering caching options that make sense in my use case? E.g. instead of rendering the component, the component would cache the load() input or even the generated HTML. Are there libraries or caching solutions that are well-known in Svelte world and integrate well with Svelte?

Answer 1

No built in feature exists to my knowledge.

This post might help a little in terms of understanding SSR: SSR explained in SvelteKit

Else here is a template you could use. A simple cache to use would be https://www.npmjs.com/package/timed-cache

  export async function load({ page, fetch, session, stuff }) {

  if (isDataInCache && isDataNotExpired) {
    return {
      props: {
        data: getDataFromCache()
      }
    }; 

  } else {
    const url = `/your-url`;
    const res = await fetch(url);

    if (res.ok) {
      const data = await res.json();

      writeDataToCache(data);

      return {
        props: {
          data
        }
      };
    }

    return {
      status: res.status,
      error: new Error(`Could not load ${url}`)
    };

  }
}

Answer 2

You could jump straight into libraries such as svelte-swr or svelte-sswr. Though SvelteKit supports a number of facilities out of the box which you can use to optimize performance closer to the client first, helping eliminate costly server requests while improving user experience.

Start on the client first, then work your way down the stack. Here are some native SvelteKit performance features to look at before adding external dependencies:

• Service Workers can be used to cache data in the browser.
• The externalFetch hook can be used to bypass external API requests in SSR.
• Output cache can be used to cache page data for a period of time.

Once you've exhausted your options in the browser and via native features, then you could look at adding external SWR dependencies to further optimize performance without masking the performance wins you could achieve using inbuilt and standards-based SvelteKit features.

Alternatively, you could make the server-side calls not cost as much without adding too much complexity by caching the database as you noted in the comments. Here's a post from Geoff discussing how to integrate Redis with a SvelteKit application:

https://blog.upstash.com/svelte-with-serverless-redis

Finally, if you're using something like GraphQL many clients have inbuilt caching facilities which would likely also help improve response time while limiting over- and under-fetching.