前端单页面应用实现服务端渲染

在此就不过多介绍什么是单页面应用 什么是服务端渲染 服务端渲染的作用了

服务端渲染方式

1. 后端模板渲染 如: ejs jinjia等
2. 借助第三方框架 nuxt next

• vue相关的 Nuxt
• react 相关的 Next

3. 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://** ;