如何使用load()

Question

我试图了解 SvelteKit 如何在不同场景下渲染我的 Web 应用程序，我对

load()

有点困惑。

我创建了一个带有加载函数的页面，该函数调用外部 API 并使用响应作为组件的 prop。在

.svelte-kit/output/prerendered/pages/mypage.html

中，我可以看到它在构建步骤中获取了数据，并使用响应预渲染了我的 html。

当我导航到网络应用程序中的该页面时，网络选项卡告诉我它在渲染之前调用外部 API。那么，预渲染的意义何在？

SvelteKit 文档说：

定义页面或布局的组件可以导出在创建组件之前运行的加载函数。此函数在服务器端渲染期间和客户端中运行，并允许您在页面渲染之前获取和操作数据，从而防止加载微调器。

我不明白这个。如果每次导航到页面时都会调用 API，如何阻止加载微调器？什么时候应该使用预渲染的 html？

在客户端和服务器中渲染的整个概念对我来说没有意义。在我看来，如果数据是静态的，我希望在服务器上进行预渲染，但如果数据发生变化，那么我希望每次访问该页面时都调用 API（可能需要缓存）。但为什么我想两者都做？

Answer 1

但是我为什么要两者都做呢？

因为服务器端渲染在首次加载时往往会更快。

当用户直接访问网站时，服务器端渲染版本在某些条件下会更快地显示内容，例如如果渲染页面更加复杂，则在网络速度较慢或硬件功率不足的情况下。

完全预渲染的版本甚至更快，因为甚至服务器也不必执行任何渲染或等待请求。

首次加载时，直接访问预渲染路由时，您将获得预渲染页面，其中包含构建期间请求的数据。但是

load

被设计为在客户端和服务器上运行，因此无论页面是否预渲染它都会运行。

这意味着您在直接加载页面时可以快速获取过时的数据，在客户端导航到页面时可以快速获取较慢但最新的数据。

我认为您想要用于真正静态页面的不是 page

load

而是 server

load

函数（在

+page.server.ts/js

中）或

GET

端点，这只会曾经在服务器上运行，因此对于预渲染页面，它只会在构建期间运行一次。

Answer 2

不知道这是否仍然相关，但我遇到了同样的问题。正如有人已经提到的

load

函数可以在服务器和客户端上运行，如果您使用 +page.ts，但是，如果您使用预渲染（Next.js 术语中的 SSG），您可以写入数据获取

load

中

+page.server.ts

函数内部的逻辑。该文件可以与您的

+page.ts

具有相同的结构，但只会在服务器上运行 only：这意味着如果您使用 SSR，它将在每个请求上运行，但服务器将完成繁重的工作，如果您使用 SSG，它只会在构建时运行。 这样，当您使用客户端路由时，您只会收到在构建时生成的

_data.json

并使用它来填充所需数据的页面组件（有点像 Next.js 所做的那样）。