Nuxt：差异 nuxtServerInit vs Mddleware vs Plugin

Question

两者有什么区别 1) nuxtServerInit 2) 中间件 3) 插件

什么时候在服务器端处理，什么时候在客户端处理。

Answer 1

1. nuxtServerInit

如果在 store 中定义了操作 nuxtServerInit，Nuxt.js 将使用上下文调用它（仅从服务器端）。当我们在服务器上有一些数据要直接提供给客户端时，它会很有用。

1. Middleware

在通用模式下，中间件将在服务器端调用一次（在对 Nuxt 应用的第一次请求或页面刷新时），在导航到更多路由时在客户端调用。在 SPA 模式下，中间件将在第一个请求和导航到更多路由时被称为客户端。

1. Plugins

Nuxt.js 允许您在实例化根 Vue.js 应用程序之前定义要运行的 JavaScript 插件。

对于未直接提及的插件，要记住的一件有趣的事情是，它们在服务器上调用一次，在客户端调用一次（除非您另外配置了它们）。

---

所以现在开始讨论差异。

NuxtServerInit 是 3 个中最独特的。它的用例非常明确：用服务器上可用的数据填充 Vuex 存储。这非常适合使用一些特定于会话的数据来设置商店。

插件和中间件之间的区别实际上归结为两件事：

1. 它们何时运行。
2. 它们运行了多少次。

中间件总是在页面导航之间运行，并且将在服务器上为第一个路由调用，然后在客户端上为用户之后进行的每次导航调用。这使得它非常适合执行检查页面之间的身份验证等操作。

插件（默认情况下）在服务器和客户端上都运行，但重要的是要记住它们只在客户端上运行一次（除非您刷新）。这使得它们非常适合导入和设置库，这些库可以添加到 Nuxt 实例中。

插件也在 Nuxt 实例创建之前运行，这意味着您无法使用 this 访问 Nuxt。这应该进一步说明插件通常应该用于配置和加载依赖项。显然这是一种过度简化，也有例外，但这应该是一个很好的起点。

当您开始深入研究 Nuxt 时，您会发现这些差异可能会变得非常模糊，并发现这 3 个中的每一个在技术上几乎可以做其他人可以做的所有事情。请务必考虑要解决的问题，然后选择对您最有意义的工具。