18

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

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

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

4

1 回答 1

30

更新：

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

完全静态仅适用于target: 'static'and ssr: true（deprecated 的对应项mode: 'universal'）。这ssr: true是一个默认值。ssr: false是 deprecated 的对应物，不能mode: 'spa'与target: 'static'. 在此处输入图像描述

原答案：

目标

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

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

目标和模式

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

在此处输入图像描述

服务器与静态目标

对于新手来说，决定是使用服务器端渲染还是静态渲染可能有点棘手。一个可以帮助您做出决定的好问题是您是否需要为不同的用户/情况为每个页面/文档/内容项提供不同的内容。如果是这样，您可能应该选择目标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
        })
      })
    }
  }
}
于 2020-08-28T16:58:11.470 回答