在此就不过多介绍什么是单页面应用 什么是服务端渲染 服务端渲染的作用了
服务端渲染方式
- 后端模板渲染 如: ejs jinjia等
- 借助第三方框架
nuxtnext
- vue相关的 Nuxt
- react 相关的 Next
- rendertron(主要介绍)
后端模板渲染
算是传统解决方案, 由服务端渲染成html返回给浏览器
第三方框架 nuxt next
- 有学习成本, 需要熟悉对应框架api
- 服务端要node环境编译
- 当访问量大的时候页面加载会变慢
Rendertron
主要介绍的就是该方法
诞生就是为了做SEO的。先说说原理，听完你就知道是个好东西了。
Rendertron是nodejs框架下的产物，是google-chrome旗下的的配套产品。
首先，服务器上装有个google-chrome，rendertron把他打开，然后在服务器（官方推荐express）中增加中间件
先判断UA（user-agent）里面有没有带有类似Baiduspider（百度爬虫）等字样，
如果没有，就像正常的单页面服务器那样，把原始html推送出去，由客户端浏览器完成js、css渲染的工作；
如果带有指定UA头字样，就先把网页推送给本地服务器那个google-chrome，等他渲染好对应页面后，把渲染好的html结果推送出去。
贴上地址
github地址: https://github.com/GoogleChrome/rendertron
部署方法
- docker镜像地址:
https://hub.docker.com/r/yamitzky/rendertron
- 安装无头浏览器
在ubuntu服务器上使用Chrome Headless - 简书
linux 安装 Headless Chrome - bambooleaf - CSDN博客
Chromeheadless安装与使用 - 探索技术世界 - CSDN博客
- 贴入某些搜索引擎的UA
baidu：Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html) Google：Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html) Sogou：Sogou web spider/4.0(+http://www.sogou.com/docs/help/webmasters.htm#07) Yahoo：Mozilla/5.0 (compatible; Yahoo! Slurp/3.0; http://help.yahoo.com/help/us/ysearch/slurp) 百度网页搜索 User-agent Baiduspider 谷歌User-agent Googlebot MSN User-agent MSNBot 有道User-agent YoudaoBot 搜狗User-agent Sogou inst spider Sogou spider2 Sogou blog Sogou News Spider Sogou Orion spider 即刻User-agent JikeSpider 搜搜User-agent Sosospider 360User-agent 360Spider
当然还有其他的搜索引擎的
const botUserAgents = [ 'Baiduspider', 'bingbot', 'Embedly', 'facebookexternalhit', 'LinkedInBot', 'outbrain', 'pinterest', 'quora link preview', 'rogerbot', 'showyoubot', 'Slackbot', 'TelegramBot', 'Twitterbot', 'vkShare', 'W3C_Validator', 'WhatsApp', ]; if ($http_user_agent ~ "(botUserAgents1)|(botUserAgents2))"){ rewrite ^/(.*)$ http://***/rendertron/http://** ;