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
loadthat 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: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>Read the documentation to learn more about the distinction between server load functions and universal load functions, and when to use which.