在 Nuxt 2.14 通用模式中 target: 'static' 和 target: 'server' 之间的真正区别是什么？

Question

在最新版本的 Nuxt (2.14) 中，他们引入了在不更改代码时构建应用程序的优化（以显着缩短构建时间）。

我在 jamstack 中制作网站，在 netlify 上部署nuxt generate，直到现在，使用target: 'server'. 我尝试了新target: 'static'的以利用这个新功能，但我的代码不会构建，因为在这种模式下，应用程序似乎无法访问this.$route以生成动态页面。

所以，我的问题是：这彼此有何不同？当我切换target到我要注意什么？

Answer 1

更新：

根据最新的文档，mode: 'universal'andmode: 'spa'被弃用而支持ssr: true和ssr: false。

完全静态仅适用于target: 'static'和ssr: true（已弃用的对应物mode: 'universal'）。该ssr: true是默认值。Thessr: false是 deprecated 的对应物，mode: 'spa'不能与 一起使用target: 'static'。

原答案：

目标

将该target属性视为托管环境可能会有所帮助- 无论您需要服务器还是 CDN 提供的静态文件都足以满足您的方案。尽管它被称为target: 'server'，但这并不意味着您的应用程序是服务器端呈现的（见下文mode）。

static在生产环境中使用目标时，您只需要一个 CDN 来为您的静态文件提供服务。这些静态文件在构建时准备好并且是“最终的”（直到具有更新内容或代码的下一次构建）。在这种情况下不需要任何服务器（除了可能在您的 CI 管道中的 CND 和构建服务器）。

目标与模式

另一方面，在使用server目标时，您的生产应用程序将需要一个服务器环境，在该环境中组合并发送客户端请求的响应。这意味着使用更新的内容无需重新构建您的应用程序。此内容是在请求服务器后编写的。这适用于 -universal和spa模式。使用该universal模式，您的应用程序在服务器端呈现。相比之下，该spa模式没有服务端渲染（只有客户端导航），整个应用程序作为单页应用程序运行

服务器与静态目标

对于新手来说，决定是使用服务器端渲染还是静态渲染可能有点棘手。一个可以帮助您做出决定的好问题是，您是否需要为不同用户/环境的每个页面/文档/内容项提供不同的内容。如果是这样，您可能应该使用 target server，否则static。

这些方法中的每一种都有其优点和缺点，例如服务器要求、安全性、速度、CI 管道/构建过程、SEO、价格等。正确的选择取决于您的用例。

正如您正确提到的，从版本开始2.13，有两个部署目标可用。那些是server和static。来源

旧方法有一些问题和困难，主要是客户端通过您的导航请求您的 APIasyncData和fetch功能。因此，生成的站点绝不是纯静态的。这里描述了旧方法的所有缺点。

使用新static目标（同时采用强制universal模式）方法，该nuxt generate命令将预渲染所有 HTML 页面并模拟异步数据请求。那个旧的asyncData，这次fetch没有从客户端请求你的 API。这已经在构建期间执行了。来源

关于路线。提到的路由可能没有被 nuxt 的爬虫自动检测到，你应该使用generate.routes属性手动生成它们。

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
        })
      })
    }
  }
}