因为公司官网SEO优化问题,必须要用服务端渲染,prerender-spa-plugin预渲染插件不能满足需求。在此记录整理,Nuxt开发服务端渲染项目时遇到的问题难点(不定时更新)
掘金上有一些很不错的Nuxt教程文章,推荐几篇:
实现基于 Nuxt.js 的 SSR 应用 - 掘金
Vue 服务端渲染(SSR)、Nuxt.js - 从入门到实践 - 掘金
Nuxt爬坑 - 掘金
记录使用Nuxt开发服务端渲染项目时遇到的问题难点整理(不定时更新)_nuxt3开发项目的难点-优快云博客
遇到问题及解决办法:
-
asyncData、fetch、validate使用范围只能应用于页面组件中,子组件中无法使用此生命周期
-
方法1 props(推荐)
-
方法2 vuex(可用)
-
方法3 不拆分组件(不建议)
-
-
异步并发请求接口
async asyncData({ app }){
try {
const res1 = 接口1;
const res2 = 接口2;
const pagePromise = await Promise.all([res1,res2]);
return{
tabList1: pagePromise[0].data,
tabList2: pagePromise[1].data
}
}catch{
return new Error('页面1渲染报错')
}
}