load() 应该如何使用

Question

我试图了解 SvelteKit 如何在不同的场景中呈现我的网络应用程序，并且我对load().

我创建了一个带有加载函数的页面，该函数调用外部 API 并使用响应作为组件的 prop。我.svelte-kit/output/prerendered/pages/mypage.html可以看到它在构建步骤中获取了数据，并使用响应预渲染了我的 html。

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

SvelteKit 文档说：

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

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

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

Answer 1

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

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

当用户直接访问站点时，服务器端呈现的版本在某些条件下会更快地显示内容，例如，如果呈现页面更复杂，则在慢速网络或动力不足的硬件上。

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

首次加载时，直接访问预渲染路由时，您将获得包含构建期间请求的数据的预渲染页面。但是load被设计为在客户端和服务器上运行，因此无论页面是否预渲染它都会运行。

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

我认为您想要用于真正静态页面的不是页面，而是 load服务器函数 load（在+page.server.ts/js）或GET端点，它只会在服务器上运行，因此对于预渲染页面，它只会在运行期间运行一次建造。