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

Question

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

1. Nuxt3如何确定在客户端和服务器端执行哪些代码？
2. 如果我想使用JWT，Nuxt3会知道它将存储在客户端吗？
3. 如果我想使用Pinia作为我的状态管理库，它将管理客户端中的状态，那么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模一起使用，所以您不需要担心它在服务器或客户端上运行。我不确定是否有能同时运行的部件。

如果存在这样的情况，不要担心: Vue的核心团队已经为您完成了这项工作。

问题太模糊了，我得说要看情况而定。您需要根据给定的NPM包是如何工作的以及您想用它实现什么来做出这个决定。

如果它支持服务器，那么在那里可能会比在客户机上更快。

对于仅在客户端上可用的东西，您可以使用客户端专用插件全局导入它，或者将其导入本地组件+设置一个条件(或者使用仅在客户端上运行的生命周期挂钩)。