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

Posted 2023-02-22

【中文标题】Nuxt 2.14 通用模式下的 target: \'static\' 和 target: \'server\' 之间的真正区别是啥？

【英文标题】：What's the real difference between target: 'static' and target: 'server' in Nuxt 2.14 universal mode?Nuxt 2.14 通用模式下的 target: 'static' 和 target: 'server' 之间的真正区别是什么？

【发布时间】：2020-11-29 20:15:15

【问题描述】：

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

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

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

【参考方案1】：

更新：

根据latest documentation、mode: 'universal' 和mode: 'spa' 已弃用，取而代之的是s-s-r: true 和s-s-r: false。

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

原答案：

目标

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

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

目标和模式

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

服务器与静态目标

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

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

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

旧方法存在一些问题和困难，主要是客户端通过 asyncData 和 fetch 函数请求您的 API 以进行导航。结果，生成的站点无论如何都不是纯静态的。旧方法的所有缺点都描述了here。

使用新的static 目标（同时强制使用universal 模式）方法，nuxt generate 命令将预渲染您的所有 html 页面并模拟异步数据请求。旧的 asyncData 和 fetch 这次没有向客户端请求您的 API。这已经在构建期间执行。 Source

关于路线。 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
        )
      )
    
  

【讨论】：

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

PS 这是非常重要的阅读材料（因为 Nuxt 文档对这些选项的覆盖程度甚至不如你），我什至在 Nuxt Reddit 上 plugged your answer :-)

根据我的理解 s-s-r: true 仅表示“在构建时” - 创建文档 (DOM) 的位置（和时间） - 无论是在客户端 (SPA) 上还是在构建时在服务器上。 TL;博士;它只是一个静态站点——就像 gatsby 所做的那样——只是一堆 html、css 和 js 捆绑在一起并由 CND 提供服务，就是这样。

@MartinMakarsky @mitya 是的，就是这样：s-s-r: true + target: static 基本上是在服务器上捆绑 HTML 文件，但仅在构建期间。使用 CDN 完全没问题，因为构建已经完成。如果选择target: server，则表示不会提前生成服务器端内容，因此需要在到达网站时进行渲染。

@kissu - 随时更新我的​​答案或添加一个新答案:)