Update:
根据latest documentation,mode: 'universal'
和mode: 'spa'
被否决,而ssr: true
和ssr: false
被否决.
Full static works only with target: 'static'
and ssr: true
(counterpart of deprecated mode: 'universal'
). The ssr: true
is a default value. The ssr: false
is a counterpart of the deprecated mode: 'spa'
and cannot be used with target: 'static'
.
Original answer:
目标
将target
属性视为hosting environment可能会有所帮助——无论您需要服务器还是CDN提供的静态文件都足以满足您的场景.尽管它被称为target: 'server'
it doesn't mean your app is server-side rendered(见下文mode
).
在生产环境中使用static
target时,您只需要一个CDN即可为静态文件提供服务.这些静态文件是在构建时准备好的,并且是"最终的"(直到下一个包含更新内容或代码的构建).在这种情况下不需要任何服务器(CND和build server除外,它可能会在您的CI管道中).
目标 & Mode
另一方面,当使用server
目标时,您的生产应用程序将需要一个服务器环境,在该环境中,客户端请求的响应将被合成并发送.这意味着有了更新的内容,就不需要重新构建应用程序.此内容是在请求服务器后编写的.这适用于-universal
和spa
模式.在universal
模式下,你的应用程序是服务器端渲染的.相比之下,spa
模式没有服务器端呈现(只有客户端导航),整个应用程序作为单页应用程序运行
Server vs. Static 目标
对于新手来说,决定使用服务器端渲染还是静态渲染可能有点棘手.一个可能有助于你做出决定的好问题是,你是否需要为不同的用户/环境 for each 页面/文档/内容项提供不同的内容.如果是这样的话,你可能应该 Select 目标server
,否则是static
.
每种方法都有其优缺点,比如服务器需求、安全性、速度、CI管道/构建过程、SEO、价格等.正确的 Select 取决于您的用例.
正如您正确提到的,从版本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
})
})
}
}
}