在之前关于加载的章节中，我们使用 +page.server.js 和 +layout.server.js 文件从服务端加载数据。当你需要直接从数据库获取数据或读取 cookies 时，这种方式非常方便。

在进行客户端导航时，有时从服务器加载数据并不合理。例如：

• 你正在从外部 API 加载数据
• 你想在数据可用时使用内存中的数据
• 你想延迟导航直到图片预加载完成，以避免突然出现
• 你需要从 load 返回一些无法序列化的内容（SvelteKit 使用 devalue 将服务器数据转换为 JSON），比如组件或 store

在这个练习中，我们处理的是后一种情况。在 src/routes/red/+page.server.js、src/routes/green/+page.server.js 和 src/routes/blue/+page.server.js 中的服务端 load 函数返回了一个 component 构造函数，这是无法像数据那样被序列化。如果你导航到 /red、/green 或 /blue，你会在终端看到 “从 load 返回的数据...不可序列化” 的错误。

要将服务端 load 函数转换为通用 load 函数，将每个 +page.server.js 文件重命名为 +page.js。这样，这些函数将在服务端渲染期间在服务端上运行，同时也会在应用程序水合或用户执行客户端导航时在浏览器中运行。

现在，我们可以像使用其他值一样使用这些 load 函数返回的 component，包括在 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>

阅读文档了解更多关于服务端 load 函数和通用 load 函数之间的区别，以及何时使用哪种方式。