Nuxt fetch hook：为什么在服务器和客户端都触发？

Question

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

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

Answer 1

这本质上用于同构（又名通用）应用程序方面。因此，如果您有

ssr: true

，这将通过提前生成内容（因此也在服务器上）来帮助您提高性能和 SEO。

两边都这样做，因为你需要在服务器和客户端上有相同的内容，否则会出现 DOM 不匹配，水化会失败（意味着巨大的性能损失！）。

并且

target: static

+

ssr: true

是一个常见的组合，特别是在 Vercel/Netlify 上托管时，因为它将提供性能、SEO 以及 SPA 的所有优势。

如果您仅将 Nuxt 应用程序用作 SPA (

ssr: false

)，其好处就不那么令人印象深刻，但人们通常会因为它的 SSR/SSG 方面而使用 Nuxt。
但是，当你的整个 SPA 正在做它的事情时，你却被困在等待你的应用程序......你可以告别 SEO。

如果您不喜欢它，您可以随时将每个组件或在

fetchOnServer

中将

false

设置为

nuxt.config.js

。
https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options

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

• 当我们生成静态内容时，初始水合完成后就不再是这种情况了
• once 如果

  target: server

  ，一旦JS被传送到浏览器，SPA就会在客户端处理后续的调用

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

---

作为旁注（使用

asyncData

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