SvelteKit 的 Nuxt 3 中的 asyncdata 钩子相当于什么？

Question

我刚刚开始学习 SvelteKit，需要知道在 Nuxt3 中执行 asyncdata 相同功能的钩子：

1. 如果用户发出获取页面的请求，并且该请求首先到达服务器（该人刷新了页面），则从服务器发出的 API 调用将获取所需的内容并将其作为页面的一部分。当页面发送给用户时，客户端不会进行相同的 API 调用，因为服务器已经调用了。

2. 如果用户已经在该页面上并导航到另一个页面，则会从客户端进行 API 调用以获取下一页所需的信息。

在 SvelteKit 中，有两种加载方法，具体取决于所使用的文件：

+page.server.ts

或

+page.ts

。

+page.server.ts

始终在服务器上运行。即使用户导航到另一个页面，客户端也会在执行

+page.server.ts

文件中写入的内容之前向服务器发出请求。

+page.ts

接近我想要的，但并不完全是我想要的。如果请求首先到达服务器，服务器将执行该文件中的代码并将完整的页面发送给客户端，但客户端也会运行相同的代码，这是不必要的。好消息是后续调用将从客户端而不是服务器进行。

所以，我的问题是，有没有一种方法可以让服务器或客户端根据哪个（服务器或客户端）收到页面请求来运行代码？

Answer 1

您只需使用

+page

加载功能即可。它的

LoadEvent

有一个

fetch

功能，可以防止重复请求。请参阅文档的最后两点：

fetch

相当于 native

fetch

Web API，还有一些附加功能：

• 它可用于在服务器上发出凭据请求，因为它继承了页面请求的

  cookie

  和

  authorization

  标头。
• 它可以在服务器上发出相对请求（通常，

  fetch

  在服务器上下文中使用时需要带有来源的 URL）。
• 内部请求（例如

  +server.js

  路由）在服务器上运行时直接转到处理程序函数，无需 HTTP 调用的开销。
• 在服务器端渲染期间，将通过挂钩到

  text

  对象的

  json

  和

  Response

  方法来捕获响应并将其内联到渲染的 HTML 中。请注意，标头不会被序列化，除非通过 filterSerializedResponseHeaders 明确包含 在水合作用期间，将从 HTML 中读取响应，保证一致性并防止额外的网络请求。