diff --git a/docs/svelte/ssr.md b/docs/svelte/ssr.md index 956f6135c1..40e0fde3da 100644 --- a/docs/svelte/ssr.md +++ b/docs/svelte/ssr.md @@ -5,6 +5,14 @@ title: SSR and SvelteKit Svelte Query supports two ways of prefetching data on the server and passing that to the client with SvelteKit. +## Caveat + +SvelteKit defaults to rendering routes with SSR. Unless you are using one of the below solutions, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client. + +One way to achieve this is to `import { browser } from '$app/environment'` and add `enabled: browser` to the options of `createQuery`. This will set the query to disabled on the server, but enabled on the client. + +Another way to achieve this is using page options. For that page or layout, you should set `export const ssr = false` in either `+page.ts` or `+layout.ts`. You can read more about using this option [here](https://kit.svelte.dev/docs/page-options#ssr). + ## Using `initialData` Together with SvelteKit's [`load`](https://kit.svelte.dev/docs/load), you can pass the data loaded server-side into `createQuery`'s' `initialData` option: @@ -38,6 +46,7 @@ export const load: PageLoad = async () => { Pros: - This setup is minimal and this can be a quick solution for some cases +- Works with both `+page.ts`/`+layout.ts` and `+page.server.ts`/`+layout.server.ts` load functions Cons: @@ -108,3 +117,4 @@ Pros: Cons: - Requires more files for initial setup +- Works with only `+page.ts`/`+layout.ts` load functions diff --git a/examples/svelte/auto-refetching/src/routes/+layout.ts b/examples/svelte/auto-refetching/src/routes/+layout.ts new file mode 100644 index 0000000000..62ad4e4f47 --- /dev/null +++ b/examples/svelte/auto-refetching/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false diff --git a/examples/svelte/hydration/src/routes/+layout.ts b/examples/svelte/hydration/src/routes/+layout.ts new file mode 100644 index 0000000000..b40fb51719 --- /dev/null +++ b/examples/svelte/hydration/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = true diff --git a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts new file mode 100644 index 0000000000..62ad4e4f47 --- /dev/null +++ b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false diff --git a/examples/svelte/playground/src/routes/+layout.ts b/examples/svelte/playground/src/routes/+layout.ts new file mode 100644 index 0000000000..62ad4e4f47 --- /dev/null +++ b/examples/svelte/playground/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false diff --git a/examples/svelte/star-wars/src/routes/+layout.ts b/examples/svelte/star-wars/src/routes/+layout.ts new file mode 100644 index 0000000000..62ad4e4f47 --- /dev/null +++ b/examples/svelte/star-wars/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false diff --git a/examples/svelte/star-wars/src/routes/films/+page.svelte b/examples/svelte/star-wars/src/routes/films/+page.svelte index 45069a3da8..3a7cb24713 100644 --- a/examples/svelte/star-wars/src/routes/films/+page.svelte +++ b/examples/svelte/star-wars/src/routes/films/+page.svelte @@ -6,7 +6,7 @@ return await res.json() } - query = createQuery({ + const query = createQuery({ queryKey: ['films'], queryFn: getFilms, }) diff --git a/packages/svelte-query/static/emblem-light.svg b/packages/svelte-query/static/emblem-light.svg deleted file mode 100644 index a58e69ad5e..0000000000 --- a/packages/svelte-query/static/emblem-light.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - emblem-light - Created with Sketch. - - - - - - - - \ No newline at end of file