Nuxt fetch 钩子：为什么在服务器和客户端都触发？答案

【问题标题】：Nuxt fetch hook: why triggered both in server and in client?Nuxt fetch 钩子：为什么在服务器和客户端都触发？
【发布时间】：2021-10-01 19:40:09
【问题描述】：

在渲染路由时在服务器端调用fetch，在导航时在客户端调用。

我了解 Nuxt.js 支持通用应用程序的概念，但为什么有人需要在服务器和客户端都执行 fetch 挂钩块？对我来说听起来很多余。

【问题讨论】：

标签： nuxt.js

【解决方案1】：

这主要用于同构（又名通用）应用程序方面。因此，如果您有 ssr: true，这将通过提前生成内容来帮助您提高性能和 SEO，因此也在服务器上。

这是在双方都完成的，因为您需要在服务器和客户端上拥有相同的内容，否则会出现 DOM 不匹配并且水合将失败（意味着巨大的性能损失！）。

而target: static + ssr: true 是一个常见的组合，尤其是在 Vercel/Netlify 上托管时，因为它将提供性能、SEO 以及 SPA 的所有好处。

如果您仅将 Nuxt 应用程序用作 SPA (ssr: false)，则其好处会不那么令人印象深刻，但人们通常会选择 Nuxt 是因为它的 SSR/SSG 方面。
但是，当您的整个 SPA 都在做这件事时，您会一直在等待您的应用程序……您可以告别 SEO。

如果您不喜欢它，您可以随时将fetchOnServer 设置为每个组件或nuxt.config.js 中的false。
https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options

最后，当它说这将在服务器和客户端上生成时，我们确实需要了解服务器正在进行调用：

这并不是一种巨大的浪费，而且服务器总是在每个客户端导航（MPA 方法）上为您进行调用。

作为旁注（使用asyncData），当从 API 生成一些页面时，您可以使用已经计算的服务器负载，而不必再次在客户端上获取它。对于博客等一些纯静态内容很有用！
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#speeding-up-dynamic-route-generation-with-payload

【讨论】：

"[...] 您需要在服务器和客户端上拥有相同的内容，否则会出现 DOM 不匹配并且水合将失败（这意味着巨大的性能损失！）。"我不明白：通用应用程序的重点是在服务器端呈现一些内容，而在共享相同代码库的同时在客户端呈现一些内容。拆分渲染意味着并非所有内容都需要同时存在于服务器和客户端中。你能详细说明一下吗？
@DanielMartinez 一些 SSG/SSG 代码可用于解决来自 SPA 应用程序的问题。如果您的应用程序仅在客户端生成，那么您的性能（网络指标）将很差，并且主要没有 SEO。仅在服务器上完成它会具有典型 Wordpress 应用程序的缺点，即完全重新加载您的页面并查询到服务器（您需要为 btw 付费的服务器）。静态渲染 + 通用应用程序通常是最好的，因为您确实有背面 + 正面 + 无需支付服务器费用。有关可能的水合作用问题的更多信息：blog.lichter.io/posts/vue-hydration-error