最近一直在研究的东东, 趁着周末闲着不如记录下来…
SPA(单页面应用)项目对于SEO(搜索引擎优化)非常不利，爬虫爬SPA应用的时候，所有的页面源码都是下面的样子(Ctrl +U 就可以查看网页源代码)。
<html>
<head>
<title>Single Page Application</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
在index.html入口文件中设置title,meta信息等是整个项目所有页面共用的，
有SEO需求页面的title,meta信息是无法定制化的，网页中的内容如商品信息等爬虫更无从知道。
因此想支持SEO，SPA需要SSR。
SSR可以在访问特定页面的时候，返回特定页面的title,meta信息以及html源码。（简单粗暴的理解，当然不止于此）
那么SPA做SSR,有几种办法呢？
1.预渲染 使用 webpack prerender-spa-plugin组件
2.vue ssr 使用 vue-server-renderer package
3.Nuxt.js 框架
4.使用prerender.io 等技术 (https://prerender.io/)
在这里比较一下几种方法的优缺点，如有差错，欢迎指正啦~
1.预渲染 使用 webpack prerender-spa-plugin组件
优点：
1.是简单，易用代价小。特别是在SPA应用开发完成阶段，如果有SEO需求的话可以采用这个方法.
2.vue-cli项目可以使用，因为vue-cli项目不支持vue-server-renderer哦!!! 想求证的可以去vue-cli的github issue中查看。
缺点：
1.只支持静态路由，动态路由不支持，例如 /good/:goodNo ,带param的路由不支持。
2.数据频繁变动的页面，不适合。
预渲染是在编译阶段生成的静态html，如果编译后数据有变化，访问页面的时候会出现先显示旧数据，再显示新数据的现象。
用户体验不佳，还可能给用户造成误会。
其实这一点可以想办法避免，具体问题具体分析。
3. 页面太多会增加编译的时间。但我觉得也不会有那么多页面需要支持SEO,这一点也可以忽略。
2.vue ssr 使用 vue-server-renderer package
优点：
就是使用vue-server-renderer可以达到SEO的效果啦，适合使用 vuejs+webpack架构的应用，而不是使用vue-cli的项目
缺点：
要配置的东西太多了，大家都在重复造轮子。
3.Nuxt.js 框架
优点：
是一个基于vue.js的支持SSR的框架，内部封装的是方法2的东西，会让开发者省去繁琐的配置和顾虑，统一一种开发风格。
如果项目处在选型阶段，并且有SEO需求，强烈推荐！！
缺点：
emmm…因为没用过，坑肯定会有吧…
4.使用prerender.io 等技术 (https://prerender.io/)
优点：
对于开发好的SPA应用，可以不动代码而是通过web服务器配置和增加一台node服务器就可以解决。
缺点：
如果seo需求超过250个页面，收费。
还需要服务器cost…
因为我们是vue-cli框架，并且项目马上要上线了，现在提出seo需求…
太南了o(╥﹏╥)o…
方法2和3果断pass，这个时候改框架，不现实。
方法1和4中二选一，因为4需要费用，最终选择了1。
但是方法1不支持动态路由，那么动态路由的页面由backend负责做服务器渲染，渲染的方法参考4的实现思路。
即nginx中追究配置，判断如果是爬虫来访，就重定向到backend走服务器渲染，否则正常访问前端页面。
下一篇预计写一下预渲染时遇到的坑以及解决方案。
本文中一部分内容，参考下面文章。
https://blog.naver.com/aha-aha/221471483565
1742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
