单页面(如react，vue)网站的服务器渲染 SSR 之 SEO 大杀器 Rendertron

最新推荐文章于 2024-08-13 08:33:19 发布

极光推送

最新推荐文章于 2024-08-13 08:33:19 发布

阅读量768

点赞数 1

分类专栏：推送 jpush 编程语言

本文链接：https://blog.csdn.net/jpush/article/details/97627261

版权

本文介绍了如何解决单页面应用（如React、Vue）的SEO问题，通过Rendertron这一Google推出的工具，实现在服务器端渲染页面以供搜索引擎爬虫抓取。文中详细阐述了Rendertron的工作原理、安装与配置过程，并提到了优化响应时间的技巧，帮助开发者提升单页面应用的搜索引擎友好性。

摘要由CSDN通过智能技术生成

单页面网站，比如vue、recat框架的网站，一般都是直接从服务器推送index.html，再根据自身路由通过js在客户端浏览器渲染出完整的html页面。

但是搜索引擎的爬虫可没有这么智能（实际上google就有这么智能，拿到js文件自动帮你渲染好，但身在CN，将就下百度这个阿斗吧），为了SEO，要想爬虫爬到你的网站的内容，就得先由服务器把页面渲染好后再发送给爬虫，这就尴尬了，传统的服务器渲染是多页面的，一个请求对应一个页面，但SPA不是啊，本来就一个单页面，你叫我写各种路由对应渲染好了再给你？？当然也不是不可以，以下就是几种方案：

react自带的renderToString

react自带的renderToString 和 renderToStaticMarkup 就可以用来将组件（Virtual DOM）输出成 HTML 字符串，看起来不错，但是要自己配参数啊，webpack不会怎么办，原本路由写在一起怎么办，redux要改动怎么办，如果这些你都ok的话，react自带的方案也是一种不错的选择，这里就不多说了，网上相关帖子很多。

nextjs

还有一种方案，就更尴尬了，叫nextjs框架(nextjs是react的，vue的叫nuxtjs)，这种框架写出来直接就是多页面的，也就是用react的语法和规则，写出多页面网站来，每个页面的入口名字就是路由名字，服务器也是nextjs自带的，短短几行就能把单个网页渲染好并推送出去，是不是看起来棒棒的？！

那为啥说尴尬呢？就是因为他虽说跟react很像，但还是一个新框架，你不得不花时间学一下nextjs；他的路由对应页面文件，这种路由看似简单明了，但是一点都不自由；nextjs是多页面的，好不容易进化到单页面，你让我再回到中世纪？原罪啊！所以如果你已经写好了一个单页面网站，要改成nextjs框架的话，我只能说呵呵了，这返工返的……

rendertron

我们的主角要出场了！rendertron的由来我不多说了，当初诞生就是为了做SEO的。先说说原理，听完你就知道是个好东西了。

Rendertron是nodejs框架下的产物，是google-chrome旗下的的配套产品。首先，服务器上装有个google-chrome，rendertron把他打开，然后在服务器（官方推荐express）中增加中间件，先判断UA（user-agent）里面有没有带有类似Baiduspider（百度爬虫）等字样，如果没有，就像正常的单页面服务器那样，把原始html推送出去，由客户端浏览器完成js、css渲染的工作ÿ