vue.js - 目标 : 'static' and target: 'server' in Nuxt 2. 14 通用模式之间的真正区别是什么？

Question

在最新版本的 Nuxt (2.14) 中，他们引入了在不更改代码时构建应用程序的优化(以显着缩短构建时间)。
我在 jamstack 中制作网站，使用 nuxt generate 部署在 netlify 上并且，直到现在，使用 target: 'server' .我试过新的 target: 'static'为了利用这个新功能，但我的代码不会构建，因为在这种模式下应用程序似乎无法访问 this.$route以生成动态页面。
所以，我的问题是:这彼此有何不同？当我切换时 target我要注意什么？

Answer 1

更新:
根据latest documentation , mode: 'universal'和 mode: 'spa'被弃用，取而代之的是 ssr: true和 ssr: false .
完全静态仅适用于 target: 'static'和 ssr: true (已弃用的 mode: 'universal' 的对应物)。 ssr: true是默认值。 ssr: false是弃用的 mode: 'spa' 的对应物并且不能与 target: 'static' 一起使用.

原答案:
目标
考虑 target 可能会有所帮助作为 的属性(property)托管环境 - 无论您需要服务器还是 CDN 提供的静态文件，都足以满足您的场景。尽管它被称为 target: 'server' , 这并不意味着您的应用程序是服务器端呈现的 (见 mode 波纹管)。
使用 static 时目标，在生产环境中，您只需要一个 CDN 来为您的静态文件提供服务。这些静态文件在构建时准备好并且是“最终的”(直到具有更新内容或代码的下一次构建)。在这种情况下不需要任何服务器(除了可能在您的 CI 管道中的 CND 和构建服务器)。
目标与模式
另一方面，当使用 server 时目标，您的生产应用程序将需要一个服务器环境，在其中组合并发送客户端请求的响应。这意味着使用更新后的内容无需重新构建您的应用程序。此内容是在请求服务器后编写的。这适用于两者 - universal和 spa模式。与 universal模式，您的应用程序在服务器端呈现。相比之下，与spa模式没有服务器端渲染(只有客户端导航)，整个应用程序作为单页应用程序运行

服务器与静态目标
对于新手来说，决定是使用服务器端渲染还是静态渲染可能有点棘手。一个可以帮助您做出决定的好问题是，您是否需要为不同用户/环境的每个页面/文档/内容项提供不同的内容。如果是这样，您可能应该选择目标 server , 否则 static .
这些方法中的每一种都有其优缺点，例如服务器要求、安全性、速度、CI 管道/构建过程、SEO、价格等。正确的选择取决于您的用例。
正如您正确提到的，从版本 2.13有两个可用的部署目标。那些是 server和 static . Source
旧方法有一些问题和困难，主要是客户端通过 asyncData 请求您的 API。和 fetch导航功能。因此，生成的站点绝不是纯静态的。描述了旧方法的所有缺点 here .
与新static目标(和强制性 universal 同时模式)方法，nuxt generate命令将预渲染所有 HTML 页面并模拟异步数据请求。那个老asyncData和 fetch这次不会从客户端请求您的 API。这已经在构建期间执行了。 Source
关于路线。提到的路由可能没有被 nuxt 的爬虫自动检测到，你应该使用 generate.routes 手动生成它们。属性(property)。

import axios from 'axios'

export default {
  generate: {
    routes() {
      return axios.get('https://my-api/users').then(res => {
        return res.data.map(user => {
          return '/users/' + user.id
        })
      })
    }
  }
}