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

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.
• Cookies and headers 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.

Answer 2

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 3

You could set up Redis. Creating HTML files on server is an expensive operation and sveltekit does not cache it.(Next.js does cache html files)

When a user visits your application, rather than generating the page your app should be checking if you already created some HTML for that page and stored it inside of Redis. If the page is already created, you would be sending it immediately to the server. If not, your app will be generating and then store that HTML inside of Redis.

Some pages needs new content for every view, some does not, for example contact page would be same for all users but user dashboard will be different for each user. So caching might not be idea for all pages. Imagine your application has 100.000 users for each you cache the dashboard page, you would need a tremendous amount of space.

It is good idea to cache only the static pages and with redis you can expire the cache data after a specified time.

You set the redis client:

import { createClient } from 'redis';

const client = createClient({
    socket: {
        host: redisHost,
        port: redisPort
    },
    password: redisPassword
});

client.on('error', (err) => console.error(err));
client.connect();

then write get and set methods.

// determine the static pages of your app
const routes = ['/about', '/contact'];
export const getCachedPage = (route: string) => {
    if (routes.includes(route)) {
        // naming key value in redis is up to you
        return client.get('pagecache' + route);
    }
    return null;
};

export const setCachedPage = (route: string, page: string) => {
    if (routes.includes(route)){
        // set(key,value)
        // set expire time in EX:
        return client.set('pagecache' + route,page,{EX:3000})
    }
};