How to use SSR with Stores on SvelteKit

Question

I am new to sveltekit and svelte in general, and I am trying to load data from an API to the stores, here is how I am doing it

    export const load = async ({ fetch }) => {
        const data = get(dataStore);

        if (browser && data) {
            return { status: 200 };
        }

        const res = await fetch('/data.json', { credentials: 'include', mode: 'cors' });
        const data = await res.json();

        if (browser) {
            dataStore.set(data);
        }

        return { status: res.status };
    };

my question is what is best approach to load data on SSR to the FE stores ?

Is using stores a requirement? I find the best approach to be returning the data from the fetch as props in the load function. — Bob Fanger, Mar 11 '22 at 21:57
@BobFanger thank you! you just unconfused me and pointed out the obvious. — Adam Shand, Dec 01 '22 at 23:39

score 1 · Answer 1 · answered Dec 24 '22 at 22:28

One possible approach is using the server's load function into a *.layout.svelte. That layout will receive the data as props and then you can keep this data in a store to propagate through the application.

I recommend doing it in fewer scenarios where you have many components at same page, sharing and modifying the same data. Otherwise, you don't need store at all.

How to use SSR with Stores on SvelteKit

1 Answers1