nuxt.js是先加载asyncdata后切换页面,有办法优化吗?

发布于 09-07 08:13 字数 98 浏览 24 评论 0

使用nuxt.js开发项目,页面切换的时候,前端渲染,会等待asyncdata执行完了页面才会加载
我希望可以先加载页面,再渲染,不然会有明显卡顿的感觉,不知道有没有办法优化?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

盗琴音2022-09-14 08:13:32

asyncData的文档里提到:

asyncData is called every time before loading the component (only for page components). It can be called from the server-side or before navigating to the corresponding route.

asyncData会在组件加载前获取,可以在服务端或者在路由跳转时执行。
所以页面跳转就会这样... asyncData应该是用于影响SEO的内容,也就是需要让爬虫读取的内容,否则直接让浏览器发ajax请求即可.
如果想要浏览器先显示没有数据的页面在发请求,你可以让SSR的时候请求asyncData,浏览器跳转的时候发ajax请求。
具体做法是:

// 根据process.server判断是否是SSR,如果是就asyncData获取
 asyncData (context) {
    if(process.server){
    // 发请求,获取{userInfo:{name:"fake",age:10"}
    }
  }

然后在mounted中根据有无获取某个值来决定是否发起请求

mounted(){
if(!this.userInfo){
// data里没有这个字段,那么就是路由跳转,手动发请求
}
}

这样看起来比较累赘,不过我想不到别的办法了。 个人理解,如果数据需要用于SEO,或者没有某个数据影响渲染才使用asyncData,否则让浏览器发ajax请求即可。 你感到卡顿说明这个请求可能需要一定时间,那么在服务端渲染时nodejs也需要等待那么久的时间,用户也会觉得你的页面加载的很慢。 所以尽量不使用asyncData..个人建议
官方的example是为了要获取列表,如果不在asynData里获取搜索引擎就看不到内容...

叹沉浮2022-09-14 08:13:32

请问 你这个方法咋解决的啊

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文