universal load function example

Author: Rich Harris

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/README.md

@@ -2,12 +2,7 @@
 title: Universal load functions
 ---
 
-> Coming soon
-
-In the meantime, read the [documentation](https://kit.svelte.dev/docs/load#shared-vs-server) to learn more about the distinction between server `load` functions and universal `load` functions.
-
-<!--
-In the previous two exercises we loaded data from the server using `+page.server.js` and `+layout.server.js` files. This is very convenient if you need to do things like getting data directly from a database, or reading cookies.
+In the [previous section on loading](page-data) we loaded data from the server using `+page.server.js` and `+layout.server.js` files. This is very convenient if you need to do things like getting data directly from a database, or reading cookies.
 
 Sometimes it doesn't make sense to load data from the server when doing a client-side navigation. For example:
 
@@ -16,9 +11,27 @@ Sometimes it doesn't make sense to load data from the server when doing a client
 - You want to delay navigation until an image has been preloaded, to avoid pop-in
 - You need to return something from `load` that can't be serialized (SvelteKit uses [devalue](https://github.com/Rich-Harris/devalue) to turn server data into JSON), such as a component or a store
 
-In this example, we're loading data from an external API in `src/routes/+page.server.js` and `src/routes/item/[id]/+page.server.js`. That means that every time we navigate from one page to another, we're making a request to our server, which in turn makes a request to the API. That's an unnecessary detour that slows requests down and increases load on our server.
+In this exercise, we're dealing with the latter case. The server `load` functions in `src/routes/red/+page.server.js`, `src/routes/green/+page.server.js` and `src/routes/blue/+page.server.js` return a `component` constructor, which can't be serialized like data. If you navigate to `/red`, `/green` or `/blue`, you'll see a 'Data returned from `load` ... is not serializable' error in the terminal.
+
+To turn the server `load` functions into universal `load` functions, rename each `+page.server.js` file to `+page.js`. Now, the functions will run on the server during server-side rendering, but will also run in the browser when the app hydrates or the user performs a client-side navigation.
+
+We can now use the `component` returned from these `load` functions like any other value, including in `src/routes/+layout.svelte`:
+
+```svelte
+/// file: src/routes/+layout.svelte
+<nav
+	class:has-color={!!$page.data.color}
+	style:background={$page.data.color ?? 'var(--bg-2)'}
+>
+	<a href="/">home</a>
+	<a href="/red">red</a>
+	<a href="/green">green</a>
+	<a href="/blue">blue</a>
 
-Let's cut out the middleman: rename both `+page.server.js` files to `+page.js`.
++++	{#if $page.data.component}
+		<svelte:component this={$page.data.component} />
+	{/if}+++
+</nav>
+```
 
-Now, the `load` functions will run on the server during server-side rendering, but will run in the browser for subsequent client-side navigations. The trade-off is that we no longer have access to things that need a server (databases, cookies, private environment variables and so on), but in this case we don't need those things. Read the [documentation](https://kit.svelte.dev/docs/load#shared-vs-server) to learn more about the distinction between server `load` functions and universal `load` functions.
--->
+Read the [documentation](https://kit.svelte.dev/docs/load#shared-vs-server) to learn more about the distinction between server `load` functions and universal `load` functions, and when to use which.

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/+layout.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<nav
+	class:has-color={!!$page.data.color}
+	style:background={$page.data.color ?? 'var(--bg-2)'}
+>
+	<a href="/">home</a>
+	<a href="/red">red</a>
+	<a href="/green">green</a>
+	<a href="/blue">blue</a>
+</nav>
+
+<slot />
+
+<style>
+	nav.has-color,
+	nav.has-color a {
+		color: white;
+	}
+</style>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/+page.svelte

@@ -0,0 +1 @@
+<h1>pick a colour</h1>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/blue/+page.server.js

@@ -0,0 +1,8 @@
+import component from './blue.svelte';
+
+export function load() {
+	return {
+		color: 'blue',
+		component
+	};
+}

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/blue/+page.svelte

@@ -0,0 +1 @@
+<h1>blue</h1>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/blue/blue.svelte

@@ -0,0 +1 @@
+<marquee>hello from blue.svelte</marquee>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/green/+page.server.js

@@ -0,0 +1,8 @@
+import component from './green.svelte';
+
+export function load() {
+	return {
+		color: 'green',
+		component
+	};
+}

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/green/+page.svelte

@@ -0,0 +1 @@
+<h1>green</h1>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/green/green.svelte

@@ -0,0 +1 @@
+<marquee>hello from green.svelte</marquee>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/red/+page.server.js

@@ -0,0 +1,8 @@
+import component from './red.svelte';
+
+export function load() {
+	return {
+		color: 'red',
+		component
+	};
+}

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/red/+page.svelte

@@ -0,0 +1 @@
+<h1>red</h1>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-a/src/routes/red/red.svelte

@@ -0,0 +1 @@
+<marquee>hello from red.svelte</marquee>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-b/src/routes/+layout.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<nav
+	class:has-color={!!$page.data.color}
+	style:background={$page.data.color ?? 'var(--bg-2)'}
+>
+	<a href="/">home</a>
+	<a href="/red">red</a>
+	<a href="/green">green</a>
+	<a href="/blue">blue</a>
+
+	{#if $page.data.component}
+		<svelte:component this={$page.data.component} />
+	{/if}
+</nav>
+
+<slot />
+
+<style>
+	nav.has-color,
+	nav.has-color a {
+		color: white;
+	}
+</style>

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-b/src/routes/blue/+page.js

@@ -0,0 +1,8 @@
+import component from './blue.svelte';
+
+export function load() {
+	return {
+		color: 'blue',
+		component
+	};
+}

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-b/src/routes/blue/+page.server.js

@@ -0,0 +1 @@
+__delete

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-b/src/routes/green/+page.js

@@ -0,0 +1,8 @@
+import component from './green.svelte';
+
+export function load() {
+	return {
+		color: 'green',
+		component
+	};
+}

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-b/src/routes/green/+page.server.js

@@ -0,0 +1 @@
+__delete

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-b/src/routes/red/+page.js

@@ -0,0 +1,8 @@
+import component from './red.svelte';
+
+export function load() {
+	return {
+		color: 'red',
+		component
+	};
+}

content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/app-b/src/routes/red/+page.server.js

@@ -0,0 +1 @@
+__delete