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

Question

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

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

Answer 1

ssr: true[假设您的 Nuxt 配置文件中确实有]
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 模块一起使用，因此您实际上不需要担心它在服务器或客户端上运行。顺便说一句，我不确定是否有可以在两者上运行的部件。
如果出现这样的情况，不用担心：Vue 的核心团队已经为你完成了这项工作。

这个问题太模糊了，我想说这要看情况。您需要根据给定的 NPM 包的工作方式以及您想要用它实现的目标来做出决定。

如果它支持服务器，那么服务器上的速度可能会比客户端上的速度更快。
对于仅在客户端上可用的内容，您可以使用仅限客户端的插件将其全局导入，或者将其导入本地组件+创建条件（或使用仅在客户端上运行的生命周期挂钩）。