有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

nuxt生命周期 SSR服务端渲染(SEO优化)

前端框架 炮渣日记 3周前 (11-08) 61次浏览 已收录 0个评论 扫描二维码

Nuxt

官方文档

简单来说,Nuxt就是基于Vue的一个应用框架,采用服务端渲染,让你的SPA应用(Vue)也可以拥有SEO

生命周期

众所周知,Vue的生命周期全都跑在客户端(浏览器),而Nuxt的生命周期有些在服务端(Node),客户端,甚至两边都在:

nuxt生命周期 SSR服务端渲染(SEO优化)

生命周期流程图,红框内的是Nuxt的生命周期(运行在服务端),黄框内同时运行在服务端&&客户端上,绿框内则运行在客户端

遇到的问题

一、从上面的生命周期可以看出来created会在服务端和客户端执行,因为服务端是没有window、localStorage、sessionStorage、cookie,所以created如果要使用这些对象的话需要先判断在客户端环境下再执行。

二、在created里执行代码又会衍生出另一个问题,如果在created里写了只在客户端执行的代码,这部分代码的效果修改了dom树的话会报错:服务端和客户端dom树不一致。这种情况把代码写到mounted下面就行。

三、nuxt项目是自带vuex的,直接写到store文件夹下就行。但是每次刷新的时候state中的值又会设成默认的,所以就用到了nuxtServerInit,每次设置state的时候把值也存到cookie中,在nuxtServerInit下再把cookie中的值赋给state,这样就可以正常使用store了。

四、可以通过中间件来判断用户是否登录,没登录跳转到登录页

nuxt生命周期 SSR服务端渲染(SEO优化)

五、asyncData函数优化

该函数中请求api接口数超过1个,多的甚至达到10,20多个,这种情况我们不能使用async await,请求完一个再接着请求下一个(同步请求接口);如果有10个接口需要请求,每个接口平均响应1s,那么至少需要10s才会响应html页面;如果使用Promise.all异步请求10个接口,那么最快接近1s响应html页面; asyncData函数会在服务端执行代码,因此一定要做好容错处理;另外如果该函数代码一直未执行完,那么页面首次响应将会被挂起,一直处于加载中 对于页面首次加载,该函数执行耗时越短,页面响应时间就越短(页面加载越快)

nuxt生命周期 SSR服务端渲染(SEO优化)

此外在asyncData中顺序执行的接口除了用await同步请求以外,还可以用下面这种写法

nuxt生命周期 SSR服务端渲染(SEO优化)

六、sessionStorage和localStorage的区别

由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的Web Storage存储机制。Web Storage具体又分两种:

1.sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage:将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。

七、借助 head 属性,Nuxt.js 让你可以在 nuxt.config.js 中配置应用的 meta 信息。nuxt生命周期 SSR服务端渲染(SEO优化)

之后只需要在每个页面配置独有的title属性就行了,title会替换模板中的”%s”

nuxt生命周期 SSR服务端渲染(SEO优化)
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址