In the previous section on loading 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:

• You’re loading data from an external API
• You want to use in-memory data if it’s available
• 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 to turn server data into JSON), such as a component or a store

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:

<nav
	class={[page.data.color && 'has-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}
		<page.data.component />
	{/if}
</nav>

Read the documentation to learn more about the distinction between server load functions and universal load functions, and when to use which.