在之前关于加载的部分中，我们使用+page.server.js和+layout.server.js文件从服务器加载数据。如果你需要执行诸如直接从数据库获取数据或读取 Cookie 之类的事情，这非常方便。

有时在执行客户端导航时，从服务器加载数据没有意义。例如

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

在本练习中，我们正在处理后一种情况。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: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}
		{@const Component = $page.data.component}
		<Component />
	{/if}
</nav>

阅读文档以了解有关服务器load函数和通用load函数之间区别的更多信息，以及何时使用哪个。