Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

上一节关于加载 中,我们使用 +page.server.js+layout.server.js 文件从服务器加载数据。如果你需要执行诸如直接从数据库获取数据或读取 cookie 之类的操作,这将非常方便。

¥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:

  • 你正在从外部 API 加载数据

    ¥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

  • 你需要从 load 返回一些无法序列化的内容(SvelteKit 使用 devalue 将服务器数据转换为 JSON),例如组件或存储

    ¥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

在这个练习中,我们处理后一种情况。src/routes/red/+page.server.jssrc/routes/green/+page.server.jssrc/routes/blue/+page.server.js 中的服务器 load 函数返回一个 component 构造函数,它不能像数据一样序列化。如果你导航到 /red/green/blue,你将看到“从 load 返回的数据...终端中出现“不可序列化”错误。

¥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.

要将服务器 load 函数转换为通用 load 函数,请将每个 +page.server.js 文件重命名为 +page.js。现在,这些函数将在服务器端渲染期间在服务器上运行,但也将在应用更新或用户执行客户端导航时在浏览器中运行。

¥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.

我们现在可以像使用任何其他值一样使用从这些 load 函数返回的 component,包括在 src/routes/+layout.svelte 中:

¥We can now use the component returned from these load functions like any other value, including in src/routes/+layout.svelte:

src/routes/+layout
<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>

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

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

1
<h1>pick a colour</h1>