docs(svelte-query): Expand SSR docs (#4809)

lachlancollins · web-flow · commit c05bb9104c5d · 2023-01-13T09:08:49.000+01:00
* docs(svelte-query): Expand SSR docs

* Expand wording

* Run prettier
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`return await res.json()`
`7`	`7`	`}`
`8`	`8`
`9`		`- query = createQuery({`
	`9`	`+ const query = createQuery({`
`10`	`10`	`queryKey: ['films'],`
`11`	`11`	`queryFn: getFilms,`
`12`	`12`	`})`