SSWR (Svelte Stale While Revalidate)

You can combine SvelteKit's server-side rendering (SSR) with SSWR's client-side live updating. This pattern involves fetching data in the SvelteKit load function and passing it to the component as initialData.

To prevent the client from immediately re-fetching the data that was just provided by the server, set revalidateOnStart: false in the useSWR configuration.

Implementation Pattern

1. Use a context="module" script to define the SvelteKit load function.
2. Fetch data using the SvelteKit fetch API.
3. Return the data in the props object.
4. In the component script, receive the initialData prop.
5. Initialize useSWR with the initialData and revalidateOnStart: false.

<script lang="ts" context="module">
  import type { Load } from '@sveltejs/kit';

  const url = 'https://jsonplaceholder.typicode.com/posts';

  export const load: Load = async ({ fetch }) => {
    const response = await fetch(url);

    return {
      props: {
        initialData: await response.json()
      }
    };
  };
</script>

<script lang="ts">
  import { useSWR } from 'sswr';

  interface Post {
    id: number;
    title: string;
    body: string;
  }

  export let initialData: Post[];

  const { data: posts } = useSWR<Post[]>(url, {
    initialData,
    revalidateOnStart: false
  });
</script>

{#if $posts}
  {#each $posts as post (post.id)}
    <h1>{post.title}</h1>
    <p>{post.body}</p>
  {/each}
{/if}

You can trigger a revalidation (refetch) manually using either a global function or a local function returned by the hook.

Using the global revalidate function

Import revalidate from sswr and provide the resolved key.

Signature: function revalidate(key, options): void

Parameters:

• key: The resolved string key to re-validate.
• options:
  • force: boolean (default false). If true, ignores dedupingInterval and forces a fetch.

Using the local revalidate function

If you destructure revalidate from useSWR, it is already bound to the specific key.

Signature: function revalidate(options): void

Example:

<script>
  import { useSWR } from 'sswr'
  const { data: post, revalidate } = useSWR('https://jsonplaceholder.typicode.com/posts/1')
</script>

{#if $post}
  <div>{$post.title}</div>
  <button on:click={() => revalidate()}>Revalidate</button>
{/if}

Mutation allows you to manually update the local cache. You can use a global mutate function or a local one returned by useSWR.

Using the global mutate function

Signature: function mutate(key, value, options): void

Parameters:

• key: The resolved string key.
• value: The new value, or a function (currentValue) => newValue.
• options:
  • revalidate: boolean (default true). Whether to trigger a revalidation after mutation.
  • revalidateOptions: Partial<SWRRevalidateOptions>. Options passed to the subsequent revalidation.

Using the local mutate function

Signature: function mutate(value, options): void

Example (Optimistic UI):

<script>
  import { useSWR } from 'sswr'
  const { data: post, mutate } = useSWR('https://jsonplaceholder.typicode.com/posts/1')
</script>

{#if $post}
  <div>{$post.title}</div>
  <!-- Mutate using a function to update only the title -->
  <button on:click={() => mutate((state) => ({ ...state, title: 'Sample' }), { revalidate: false })}>
    Mutate only title
  </button>
  <!-- Mutate using a static object -->
  <button on:click={() => mutate({ title: 'Sample' }, { revalidate: false })}>
    Leave only title
  </button>
{/if}

The useSWR hook implements the stale-while-revalidate strategy. It returns several reactive stores to manage the lifecycle of a request.

Signature: function useSWR(key, options): SWRResponse

Destructured Return Values:

• data: Writable<D | undefined>: The data from the fetcher. undefined if loading or if an error occurred.
• error: Writable<E | undefined>: The error object if the request failed.
• mutate: (value, options) => void: A local alias to mutate the data for this specific key.
• revalidate: (options) => void: A local alias to trigger a revalidation for this specific key.
• clear: (options) => void: Clears the current key's data from the cache.
• isLoading: Readable<boolean>: true if the request is in progress.
• isValid: Readable<boolean>: true if there is no associated error.

Parameters:

• key: A string or a function. If a function is provided, it can be used for dependent fetching.
• options: An optional configuration object:
  • cache: SWRCache instance (defaults to new DefaultCache()).
  • errors: EventTarget for error dispatching.
  • fetcher: (key) => Promise<any> function to retrieve data (defaults to a JSON fetch call).
  • initialData: Initial data to use instead of undefined.
  • revalidateOnStart: boolean (default true). Revalidates on mount.
  • dedupingInterval: number (default 2000). Prevents duplicate requests within this window.
  • revalidateOnFocus: boolean (default true). Revalidates when window regains focus.
  • focusThrottleInterval: number (default 5000). Throttles focus revalidation.
  • revalidateOnReconnect: boolean (default true). Revalidates when network status changes.

const { data, error, mutate, revalidate } = useSWR(key, options);