How to share a store between 2 SSR svelte apps

March 21, 2021 ~ 2 min read

By default, when you have 2 Svelte apps that are server-side rendered, they won’t share a store. So let’s take a look into how to solve this.

Basket example:


    import { store } from './store.js'

{#if $store.showBasket}
    <div id="overlay" on:click="{() => $store.showBasket = !$store.showBasket}"></div>
    <div id="shopping-basket"></div>

    import { store } from './store.js'

<button on:click="{() => $store.showBasket = !$store.showBasket}">
    The button

We want both of the apps to have control over when to display the basket.

  • When clicking the overlay of the basket
  • When clicking the button

Here’s how to make it work:

// store.js

import { writable } from 'svelte/store'

function createStore() {
    return writable({showBasket: false})

function getStore() {
    if (typeof window === 'undefined') return createStore() = || createStore()

export const store = getStore()

We get the store from the window, and if it doesn’t exist we create a new store and attach it to the window.