使用nuxt.js开发项目,页面切换的时候,前端渲染,会等待asyncdata执行完了页面才会加载我希望可以先加载页面,再渲染,不然会有明显卡顿的感觉,不知道有没有办法优化?
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请求。具体做法是:
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里获取搜索引擎就看不到内容...
请问 你这个方法咋解决的啊
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
暂无简介
文章 0 评论 0
接受
asyncData的文档里提到:
asyncData
会在组件加载前获取,可以在服务端或者在路由跳转时执行。所以页面跳转就会这样...
asyncData
应该是用于影响SEO的内容,也就是需要让爬虫读取的内容,否则直接让浏览器发ajax请求即可.如果想要浏览器先显示没有数据的页面在发请求,你可以让SSR的时候请求
asyncData
,浏览器跳转的时候发ajax
请求。具体做法是:
然后在mounted中根据有无获取某个值来决定是否发起请求
这样看起来比较累赘,不过我想不到别的办法了。 个人理解,如果数据需要用于SEO,或者没有某个数据影响渲染才使用
asyncData
,否则让浏览器发ajax请求即可。 你感到卡顿说明这个请求可能需要一定时间,那么在服务端渲染时nodejs也需要等待那么久的时间,用户也会觉得你的页面加载的很慢。 所以尽量不使用asyncData..个人建议官方的example是为了要获取列表,如果不在asynData里获取搜索引擎就看不到内容...