提醒：此方法过于简单，没有任何学习成本，只需要在服务器上配置一番即可

服务端渲染方式

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

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

1. 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 - 简书 (opens new window)

linux 安装 Headless Chrome - bambooleaf - CSDN博客 (opens new window)

Chromeheadless安装与使用 - 探索技术世界 - CSDN博客 (opens new window)

• 贴入某些搜索引擎的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',
];

• 如果你的项目中没有用到 node那么 就是用nginx配置请求转发

 if ($http_user_agent ~ "(botUserAgents1)|(botUserAgents2))"){	rewrite ^/(.*)$ http://***/rendertron/http://** }

查看已经被收录的网站

在百度搜索框中搜索

site:xxx.com

提交要收录的网站

附上链接 https://ziyuan.baidu.com/linksubmit/url

我之前公司用的效果: