Nuxt3 如何知道在服务器端和客户端执行哪些代码？

Question

我想使用 Nuxt3。 根据我的理解，它使用通用渲染，就像 CSR 和 SSR 之间的交叉。 然而，在我开始之前，我有几个问题。

1. Nuxt3 如何确定哪些代码在客户端和服务器端执行？
2. 如果我想使用 JWT 身份验证，Nuxt3 会知道这将存储在客户端吗？
3. 如果我想使用 Pinia 作为我的 state 管理库，它将在客户端管理 state，Nuxt3 将如何区分它？
4. API 请求或使用 Pusher 等第三方实时服务怎么样？

Answer 1

[假设你的 Nuxt 配置文件中确实有ssr: true ]
Nuxt 以同构方式运行您的应用程序，这意味着大部分代码应该同时在服务器和客户端上运行。

以下是 Nuxt3 可用的所有各种挂钩，以及它们应该在何处运行（服务器、客户端或两者）的解释。 Nuxt2 的这个生命周期可能会有用，因为它整体上更直观。

请注意，Nuxt 的某些部分可以专用于服务器（ server routes ）或客户端（ middleware ）。

---

根据你如何使用和实现你的 JWT，你可能会给 Nuxt 一些提示。 假设您想将其用作插件，您可以：

• /plugins/myPlugin.ts让它同构
• /plugins/myPlugin.client.ts只在客户端有它（ server.ts后缀的互惠）

这完全取决于您的包/实现是否可以同构。 如果没有好处，就没有必要让所有东西都在服务器上运行。
另请注意，某些代码只能在客户端（使用window ）或服务器（使用fs ）上运行。

您当然也可以使用一些肮脏的条件，如if (process.client) {...进入同构位置（中间件、可组合等）。

---

Pinia 可能会与它的Nuxt 模块一起使用，所以你真的不需要担心它在服务器或客户端上运行。 我不确定是否有部分可以在两个 btw 上运行。
如果出现这种情况，请不要担心：Vue 的核心团队已经为您完成了这项工作。

---

这个问题太模糊了，我会说这取决于。 您需要根据给定的 NPM package 的工作方式以及您希望通过它实现的目标来做出该决定。

如果它支持服务器，那可能会比在客户端更快。
对于仅在客户端可用的东西，您可以使用仅客户端插件将其全局导入，或将其导入本地组件+设置条件（或使用仅在客户端运行的生命周期挂钩）。