先谈谈什么是 SEO。搜索引擎优化（Search engine optimization，简称 SEO ），指为了提升网页在搜索引擎自然搜索结果中（非商业性推广结果）的收录数量以及排序位置而做的优化行为，是为了从搜索引擎中获得更多的免费流量，以及更好的展现形象。
而 Vue 作为单页面应用框架，所有的数据都是通过 axios 进行返回的，也可以想成是 ajax 请求异步返回的，是非常不利于 SEO 的。
而百度收录的原理，其实就是百度的爬虫程序去爬取咱们的网站网站，但是因为我们内容都是通过 axios 异步返回，所以只能看到下面这样的骨架代码，因此百度也就只会收录咱们的首页了。
一般爬虫抓取页面内容是先从一个页面出发，从中提取出其他页面的链接，然后当作下一个请求的对象，一直重复这个过程。所以要有良好的 SEO，需要你在各大网站上拥有外链，这样会提高你的网站被搜索引擎爬虫的几率。
而 Vue 为了解决 SEO 问题，官方有 Vue SSR 方案，后面又推出了 Nuxt.js 框架。但这些均涉及到代码逻辑的调整。
回归到原始需求，为了提高用户体验我们用了 Vue、React 这些 SPA 技术、为了 SEO 我们用了 SSR、预渲染等技术。
不同技术方案有一定差距，不能兼顾优点。但仔细想，需要这些技术优点的 "用户"，其实时不一样的，SPA 针对的是浏览器普通用户、SSR 针对的是网页爬虫，如 googlebot、baiduspider 等，那为什么我们不能给不同“用户”不同的页面呢，服务端动态渲染就是这种方案。
后来，通过蘑菇社区，发现了 prender-alpine 这个开源项目https://github.com/tvanro/prerender-alpine
下面开始SEO 改造
- 使用docker拉取镜像并运行
docker pull registry.cn-shenzhen.aliyuncs.com/mogublog/prerenderdocker run -p 3000:3000 registry.cn-shenzhen.aliyuncs.com/mogublog/prerender启动完成后，可以看到项目运行在 3000 端口
搭建完成后，我们可以打开浏览器进行测试，打开 http://47.113.191.68:3000/http://cycy.games 页面，后面挂着的就是你要预渲染的页面，如果能够打开下面的页面，说明已经预渲染成功了
同时，通过查看网页源码，也能够看到页面的文字和链接了，这样爬虫也就能爬取到我们网站的其它信息
下面，我们就需要改造我们的 nginx 了，通过 $http_user_agent 来识别请求的 user_agent 是否属于 Google、百度、必应、360.... 的爬虫
如果识别成功，那么会跳转到刚刚搭建的 prerender 容器中进行预渲染，否则继续返回原来的 Vue 页面
下面是nginx 配置文件：
server{ listen 83; server_name 47.113.191.68; index index.html; root /www/wwwroot/blog/dist; location / { try_files $uri @router; index index.html; } location @router { set $render 0; if ($http_user_agent ~* "googlebot|bingbot|Baiduspider|360Spider|Sogou web spider|Bytespider") { set $render 1; } if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") { set $render 0; } if ($render = 1) { set $render "47.113.191.68:3000"; rewrite .* /$scheme://$host:$server_port$request_uri? break; #如果使用了多层代理的情况下可以使用下面的写法，因为多层代理可能会导致上面的变量不会被正确传递。 #rewrite .* /http://47.113.191.68:83$request_uri? break; proxy_pass http://$render; } if ($render = 0) { rewrite .* /index.html break; } }}修改完成后，可以使用站长工具进行测试了
可以看到前后结果对比
到这里，网站针对爬虫专属的 SEO 就改造完毕了。
注意：如果网站使用了CDN，那么爬虫会命中cdn从而导致获取的内容和未改造前一致。
以阿里云的CDN为例：
Cachekey是一个文件在CDN节点上缓存时唯一的身份ID，每个在CDN节点上缓存的文件都对应一个Cachekey。文件的Cachekey默认为客户端请求的URL（带参数）。
例如：客户端请求的URL一样时，CDN将视为请求同一个文件。但实际上请求的Http Header中携带了client字段区分了客户端系统，希望请求不同文件。
此时可在缓存配置中通过自定义Cachekey将client字段的值拼接至Cachekey，两个请求即可识别为2个不同的Cachekey。
如下：
本文转载自蘑菇社区，根据文章进行的个人实践。
池鱼的个人网站