vue学习笔记（三）

1.vue开发存在SEO问题

前端开发采用vue开发后是单页面

单页面里面，前后端分离，渲染过程是js写的，在js调用接口返回数据之前，页面已经被打开了

实际上就是空白页面，这个时候右键点击查看源代码，实际上是都看不到内容的

对SEO不太有好

【最新的谷歌蜘蛛好像可以爬取到这种页面的数据。但是百度还是不行】

2.如何解决SEO问题

SEO主要是三点：

• 多页面
• 可配置title，关键词和描述（这里的title，关键词，描述还可能还动态的）
• 页面要有内容

解决上述单页面SEO存在的问题有几种解决思路：

2.1前后端不分离

前后端不分离 不存在接口调用，一调用就是返回的页面，浏览器直接渲染
一出来就是整个页面一起出来

压力再后端

优点是安全性，不对外暴露接口

2.2前后端分离

这种时候压力都是在前端

2.2.1.预渲染

压力在客户端

现在比较流行的是prerender技术

打包的时候就将数据获取到 。
在html页面加载之前数据过来渲染后才有html的dom结构，这样的话可能会存在页面空白的情况。

 

缺点就是：

每次都要配置路由，页面多的话，配置麻烦，无法实现动态路由

页面变化都要重新打包

如果title关键词描述等来源于接口，配置到meta-info也无法实现（有其他变通方法，需引入其他技术）

优点：

能解决多页面问题，不像vue只能打包出一个index.html文件

2.2.2.服务端渲染

压力也是在客户端

这里说的“服务端渲染”实际是前端的服务端nodejs

原理相当于是起了2个服务
一个是后端的业务服务，一个是nodejs的服务

 这个相当于是重构之前的代码

适用场景是所有页面都要做SEO

采用unxtjs进行改造

这个改造还是挺大的