动态 API 调用在 Nuxt.js 静态模式与 SSR 模式下如何工作？

Question

即使在阅读了多篇解释静态渲染和 SSR 渲染之间差异的文章之后，我仍然不明白动态 API 调用在这些不同模式下是如何工作的。

我知道 Nuxt 有fetch和asyncData钩子，它们在静态生成期间仅调用一次，但是如果我在组件方法内使用动态 HTTP 请求（例如，通过 POST 请求提交表单时）会怎样？这在静态网站中也有效吗？

我正在创建一个在大多数页面上显示用户生成的内容的网站，因此每次访问其中一个页面时我都必须发出 GET 请求以保持内容最新。我可以使用静态站点来做到这一点还是必须使用 SSR/其他东西？我不想使用客户端渲染（SPA 模式），因为它很慢并且不利于 SEO。那么我最好的选择是什么？

Answer 1

当您使用(SSG) 或（默认，SSR）时，实际上asyncData()或钩子之间没有区别。 至少，在您的用例中不是。fetch()target: statictarget: server

它们主要由您的水合应用程序使用。
提醒一下，当使用 SSG 或 SSR 时，您的静态页面将被水化，并将成为具有我们喜欢的所有动态功能的 SPA。SSG + SPA或 的这种组合SSR + SPA称为通用应用程序（或同构应用程序）。

两者asyncData()都会fetch()在您的客户端 SPA 中导航时被调用。

服务器端还会发生一些事情，例如当您向服务器请求 SSR 构建的应用程序时fetch被调用（默认情况下）。

或者事实上，当您生成应用程序时（如果使用 SSG），您可以访问一些 API 并生成动态路由（例如，在无头 CMS + 博客组合的情况下很有用）。
出于性能原因并获得快速构建时间，您可以传递 a并在动态路由的挂钩payload中使用它，如此处所述asyncData

尽管如此，静态 Nuxt 应用程序基本上只是一个app built ahead of time, with no need for a Node.js server，因此为什么 SSG 应用程序可以免费托管在 Netlify (CDN) 上，但 SSR 应用程序需要托管在 Heroku 之类的东西上（在付费 VPS 上）。

这里要问自己的主要问题是：

• 您需要保护某些内容吗？像一些视频课程、私人用户信息等...已经在您的 Nuxt 项目中（如果是 SSG，禁用 JS 将允许访问生成的内容）
• 你的第一页是登录页面吗？是否必须访问其余内容？就像管理仪表板一样（如果数据是私有的，则无法提前生成内容，想想为每个帐户生成 Facebook 的提要，如上所述，这是不可行且不安全的）
• 我的 API 更新是否非常频繁，我是否需要一些超快的构建时间（本质上是免费套餐的限制）？（每次API改变时SSG都需要重新生成）

如果这些都不相关，你完全可以去 SSG。
如果其中之一对您很重要，您可以考虑 SSR。

我确实建议尝试所有这些：

• SSR ( ssr: true+ target: server) 与yarn build && yarn start
• SSG ( ssr: true+ target: static) 与yarn generate && yarn start
• 仅限 SPA（ssr: false+ 任一target: static，target: server也可以，但谁愿意支付 SPA 费用？！）yarn generate && yarn start

如果您想确保了解本地构建之外的差异，也请尝试将其托管在某些平台上。
您还可以使用这种扩展来仔细检查是否启用 JS 的行为。

我可能会建议采取 SSG 路径。尽管如此，如果您的内容总是在变化，您可能不会从 SEO 中受益匪浅（例如：Twitter或Facebook）。

这个github 答案也许可以帮助您更好地理解事情（它确实有一些来自 Atinux 的视频）。

PS：我在最新的 Nuxtnation 上制作了一个关于此的视频，您可以在这里找到。

Answer 2

我在组件方法中使用动态 HTTP 请求（例如，通过 POST 请求提交表单时）？这在静态网站中也有效吗？

这个问题的简短回答是，是的，它确实有效。事实上，您可以在代码中的任何生命周期挂钩或方法中使用 http 请求，并且它们在静态模式下也可以正常工作。

Nuxt.js 中的静态站点生成和 ssr 模式是帮助您解决 SEO 问题的工具，我将通过示例解释其差异。

想象一下，您有一个博客文章页面，其网址类似于coolsite.com/blogs来自数据库的一些文章。

温泉

在这种模式下，当用户访问所述URL时，服务器基本上会响应一个.js文件，然后在客户端中将渲染这个.js文件。创建一个 Vue 实例，当应用程序到达请求的代码get posts（例如在钩子中）时created，它会进行 API 调用，获取结果并将帖子呈现到 DOM。

这对于 SEO 来说并不酷，因为在第一次应用程序加载时没有任何内容，并且所有搜索引擎网络爬虫都更擅长将内容理解为 html 而不是 js。

固态继电器

在此模式下，如果您使用 asyncData 挂钩，当用户请求所述 URL 时，服务器会运行 asyncData 挂钩中的代码，您应该在其中调用博客文章的 API。它获取结果，将其渲染为 html 页面，并将其发送回用户，其中包含已包含的内容（Vue 实例仍然在客户端中创建）。客户端无需向服务器发出任何进一步的请求。当然，您仍然可以在其他方法或钩子中进行 api 调用。

这里的缺点是您需要某种特定的部署方式才能使其工作，因为代码必须在服务器上运行。例如，您需要 Node.js 网络托管才能在服务器上运行您的应用程序。

静止的

这种模式实际上是后两种模式的折衷。这意味着您可以拥有静态网络托管，但仍然可以使您的应用程序更好地进行搜索引擎优化。

它的工作方式很简单。您再次使用 asyncData，但在这里，当您在本地计算机中生成应用程序时，它会运行 asyncData 内的代码，获取帖子，然后为每个应用程序路由呈现正确的 html。因此，当您部署并且用户请求该 URL 时，她/他将获得一个呈现的页面，就像 SSR 模式下的页面一样。

但这里的缺点是，如果您向数据库添加帖子，则需要在本地计算机中生成应用程序，并使用新生成的文件更新服务器上所需的文件，以便用户获取最新的内容。

除此之外，任何其他 API 调用都可以正常工作，因为所需的代码已经发送给客户端。

旁注：我在示例中使用了 asyncData，因为这是您应该在页面级别使用的挂钩，但 fetch 也是一个 Nuxt.js 挂钩，其在组件级别的工作方式或多或少相同。