针对搜索引擎爬虫的欺骗式SSR

玩Google Webmasters的可能会有这种经历。自己开发的app用了Vue/React，写完后用Fetch as Google一爬傻眼了，爬不到东西。

网上搜解决方案出来的都是一堆额外的SSR框架，要上node，还看起来麻烦的要死。对于已经完成的项目，为了让搜索引擎爬虫能爬几个页面，又是改前端代码，又是改后端语言真的是郁闷。

一种迅雷不及掩耳盗铃式的解决方案：

1. 判断浏览者是人还是爬虫
   a. 是人，直接走正常html + javascript渲染流程
   b. 是爬虫，去[2]
2. 缓存文件夹找渲染好的html文件
   a. 存在，把渲染好的html文件直接丢给爬虫
   b. 不存在，去[3]
3. 服务器开命令行浏览器访问同样地址，将渲染完成后的页面生成字符串丢给爬虫，并将字符串存储为html文件存放到缓存文件夹

如此一来，用户仍旧按原方式访问应用，而爬虫爬到的是已经渲染好的页面，这样就不会出现爬虫空白页面的情况了。当然在执行这套方案的时候有两个要点：

• 关于命令行浏览器。Headless Browser很多，但不是所有的都能用。很多地方说用PhantomJs来做，这个浏览器其实是不靠谱的。一来需要额外写个setTimeout的脚本来等待页面渲染完成，二来目前该浏览器不支持ES6，如果javascript里有不支持的语法会导致渲染失败。而使用chrome浏览器的话，语法支持没问题，而且只需一行代码即可搞定

  google-chrome --headless --disable-gpu --dump-dom --no-sandbox --window-size=1280,1696

• 关于生成的字符串。用dump dom的方式生成的字符串是不能直接使用的，因为字符串中仍然包含用来客户端渲染的javascript代码，爬虫爬到后会尝试执行，然后又得出爬出了一个空页面。对于渲染完成后的字符串，需要用正则或DOM把其中的javascript代码给去掉，这样爬虫就可以正常解析了

PHP实现，包括缓存策略共50行代码