资讯专栏INFORMATION COLUMN

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

djfml / 423人阅读

摘要:对于已经完成的项目,为了让搜索引擎爬虫能爬几个页面,又是改前端代码,又是改后端语言真的是郁闷。对于渲染完成后的字符串,需要用正则或把其中的代码给去掉,这样爬虫就可以正常解析了实现,包括缓存策略共行代码

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

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

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

判断浏览者是人还是爬虫
a. 是人,直接走正常html + javascript渲染流程
b. 是爬虫,去[2]

缓存文件夹找渲染好的html文件
a. 存在,把渲染好的html文件直接丢给爬虫
b. 不存在,去[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行代码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/28237.html

相关文章

  • 针对搜索引擎爬虫欺骗SSR

    摘要:对于已经完成的项目,为了让搜索引擎爬虫能爬几个页面,又是改前端代码,又是改后端语言真的是郁闷。对于渲染完成后的字符串,需要用正则或把其中的代码给去掉,这样爬虫就可以正常解析了实现,包括缓存策略共行代码 玩Google Webmasters的可能会有这种经历。自己开发的app用了Vue/React,写完后用Fetch as Google一爬傻眼了,爬不到东西。showImg(https:...

    remcarpediem 评论0 收藏0
  • web页面渲染(二)

    摘要:然而这些代码也会竞争系统的处理能力,因此在页面内容被渲染完成之前,必须要经常处理一些东西。注意事项当在网站上选择渲染策略时,团队通常会考虑的影响。它显示了抓取工具显示任何页面的方式预览,找到的序列化内容执行后以及渲染过程中遇到的任何错误。 客户端渲染(CSR) 客户端渲染意味着在浏览器中使用Javascript直接渲染页面。所有的逻辑,数据获取,模板和路由都在客户端处理。 对于移动设备...

    mo0n1andin 评论0 收藏0
  • 理解vue ssr原理,自己搭建简单ssr框架

    摘要:前言大多数项目要支持应该是为了考虑,毕竟对于应用来说,搜索引擎是一个很大的流量入口。引入是一个构建客户端应用的框架,即组件是在浏览器中进行渲染的。由于服务端渲染要用做中间层,所以部署项目时,需要处于运行环境。 前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口。Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成S...

    Riddler 评论0 收藏0
  • Vue.js 服务端渲染业务入门实践

    摘要:说起,其实早在出现之前,网页就是在服务端渲染的。没有涉及流式渲染组件缓存对的服务端渲染有更深一步的认识,实际在生产环境中的应用可能还需要考虑很多因素。选择的服务端渲染方案,是情理之中的选择,不是对新技术的盲目追捧,而是一切为了需要。 作者:威威(沪江前端开发工程师)本文原创,转载请注明作者及出处。 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实...

    miya 评论0 收藏0
  • React 服务端渲染完美解决方案

    摘要:服务端渲染两种方式根据上文介绍对服务端渲染利弊有所了解,我们可以根据利弊权衡取舍,最近在做服务端渲染的项目,找到多种服务端渲染解决方案,大致分为两类。第一种方式传统方式服务端渲染,解决用户体验和更好的,有诸多工具使用这种方式如的的等。 最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权...

    DesGemini 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<