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

Question

在最新版本的Nuxt（2.14）中，他们引入了一个优化功能，当没有代码更改时可以构建应用程序（大大提高构建时间）。

我在Jamstack上制作网站，使用“nuxt generate”在netlify上部署，并且一直使用“target：'server'”。为了利用这个新功能，我尝试了新的“target：'static'”，但我的代码无法构建，因为在这种模式下，应用无法访问“this.$route”以生成动态页面。

那么，我的问题是：这两种方式有什么不同？当我切换目标时需要注意什么？

- sintj

---

ssr是true还是false？ - Stan

Answer 1

更新：

根据最新文档，mode: 'universal'和mode: 'spa'已经被废弃，推荐使用ssr: true和ssr: false。

target: 'static'和ssr: true（替代已废弃的mode: 'universal'）只适用于完全静态网站。 ssr: true是默认值。 ssr: false是已废弃的mode: 'spa'的替代品，并且不能与target: 'static'一起使用。

原始回答：

目标

将target属性视为托管环境可能有所帮助 - 无论您是否需要服务器或CDN提供的静态文件足以满足您的需求。尽管称其为target：'server'，但这并不意味着您的应用程序是服务器端渲染的（请参见下面的mode）。

在使用static目标时，在生产环境中，您只需要一个CDN来提供静态文件。这些静态文件是在构建时准备好的，并且是“最终”（直到下一次使用更新的内容或代码进行构建）。在此场景中，除了CDN和构建服务器（可能在CI流程中）之外，不需要任何服务器。

目标与模式

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

服务器 vs 静态目标

新手可能会对选择使用服务器端渲染还是静态网页生成感到迷惑。一个有用的问题可以帮助你做出决策：是否需要为不同的用户或情况提供每个页面/文档/内容项目的不同内容？如果是这样，那么你应该选择server，否则选择static。

这些方法各有优缺点，如服务器要求、安全性、速度、CI管道/构建过程、SEO、价格等。正确的选择取决于您的使用情况。

正如您正确地指出的，从版本2.13开始有两个可用的部署目标：server和static。来源 旧方法存在一些问题和困难，主要是客户端通过asyncData和fetch函数请求您的API以进行导航。因此，生成的站点根本不是纯静态的。旧方法的所有缺点都在这里描述。

通过新的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
        })
      })
    }
  }
}

- Martin Makarsky

---

嘿！我找到了你的文章！xD - SeriousLee

我一直在努力理解目标模式与渲染模式之间的区别，因为在暗示的概念上似乎存在显著重叠（至少对我来说是这样）。这个答案很好地阐明了这种混乱 - 谢谢。 - Mitya

据我理解，ssr: true 只在构建时表达“文档（DOM）创建的位置和时间”，无论是在客户端（SPA）还是在服务器上构建时。简而言之，它只是一个静态站点——类似于Gatsby——只是将一堆HTML、CSS和JS捆绑在一起并由CDN提供服务。 - Martin Makarsky

@MartinMakarsky @mitya 是的，这就是它：ssr: true + target: static 基本上是在服务器上打包 HTML 文件，但仅在构建时进行。如果您选择使用 CDN，那么完全没有问题，因为构建已经完成。如果您选择 target: server，这意味着不会提前生成任何服务器端内容，因此您需要在到达网站时进行渲染。 - kissu

@kissu - 随意更新我的答案或添加新的内容 :) - Martin Makarsky

Answer 2

	目标：静态	目标：服务器
ssr:true (通用)	SSG（在构建时生成纯静态站点页面），可以部署在像S3这样的存储服务中。甚至API数据也被预取和缓存。	SSR（每次请求时由服务器填充模板），部署到像GCP Cloud run这样的计算服务中。
ssr:false (spa)	SPA捆绑包/CSR（客户端输出：带有JS更新每个网页的静态SPA），可以部署在像S3和CloudFront这样的存储服务中。	混合型（Nuxt不会完全渲染每个页面的HTML - 将该任务留给浏览器。）部署到像GCP Cloud run这样的计算服务中。

目前，在我工作的项目中，我们使用target:server，ssr:false这个混合模式。我们禁用ssr是因为我们想要将工作转移到客户端。我们仍然使用服务器，因为我们需要随时更新网站的灵活性。关于客户端导航，我不同意@Martin Makarsky的看法。唯一应该是SPA才是客户端导航。target:server，ssr:false就像是一个混合模式，结合了响应速度和灵活性的优势。在部署时，

1. nuxt build（实时渲染并构建成生产就绪的打包文件）
2. nuxt start（启动服务器）

至于ssg、ssr和spa，我认为有很多文档解释它们。

SSG是完全静态的网站，甚至API调用也被缓存了。SSG的典型框架是Gatsby.js。

使用SSR时，当用户访问特定路由时，Node.js服务器将快速获取数据，并将其呈现为静态HTML页面发送到客户端。之后，应用程序被水化并成为单页应用程序，不再需要SSR。

SPA属于CSR（客户端渲染）类别。它在初始js捆绑包下载方面较慢，对SEO不友好。

好处是交互时间（TTI）。

我只使用了target:server，ssr:false。对于其他组合，这是基于我的研究和过去的经验。如果有任何错误，请随时更新我的答案！

参考资料：

1. https://nuxtjs.org/announcements/going-full-static/#current-issues
2. https://fauna.com/blog/comparing-spas-to-ssg-and-ssr
3. https://nuxtjs.org/docs/features/rendering-modes
4. https://nuxtjs.org/docs/features/deployment-targets/
5. https://nuxt.com/docs/getting-started/deployment

- Stan