单页面网站，比如vue、recat框架的网站，一般都是直接从服务器推送index.html，再根据自身路由通过js在客户端浏览器渲染出完整的html页面。
但是搜索引擎的爬虫可没有这么智能（实际上google就有这么智能，拿到js文件自动帮你渲染好，但身在CN，将就下百度这个阿斗吧），为了SEO，要想爬虫爬到你的网站的内容，就得先由服务器把页面渲染好后再发送给爬虫，这就尴尬了，传统的服务器渲染是多页面的，一个请求对应一个页面，但SPA不是啊，本来就一个单页面，你叫我写各种路由对应渲染好了再给你？？当然也不是不可以，以下就是几种方案

react自带的renderToString

nextjs

rendertron

下面上一张图，说明原理。（原理跟rendora的差不多，下图的rendora你把他换成rendertron就好了，rendora详见我的另一个帖子：）

好了，现在讲讲怎么用，官网有用法，我给个链接，rendertron官网。但是这里我讲一下具体怎么用的一种无脑方案，你照做就可以了，另外官网demo还有不少的坑和bug，我也挑出来和大家分享一下。

• 安装Chromeheadless

先在你的服务器上安装Chromeheadless，这是服务器上的无头chrome浏览器，如果你的服务器上已经有这个，那恭喜你了，因为安装过程的坑实在是太多太多了。网上关于安装Chromeheadless的教学贴很多，在此我贴几个
在ubuntu服务器上使用Chrome Headless - 简书
linux 安装 Headless Chrome - bambooleaf - CSDN博客
Chromeheadless安装与使用 - 探索技术世界 - CSDN博客

安装过程中你会遇到很多坑，不过不要紧，把error复制粘贴一下放百度，还是有很多解决方案的，毕竟Chromeheadless不是什么小众的东西

• 安装rendertron。

直接命令行输入npm install -g rendertron，回车，就装好了。就这么简单？呵呵，有greatWall，安装过程中必需的某个东东下载不了，这时候要用代理，会的同学当然ok，但是不会的同学就没办法了，我自己一台大陆一台海外，大陆的装不了就改海外服务器了。

还有一个方案，也是官方给出的
安装：

git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run build

运行：npm run start

能用第一种安装方案的推荐用第一种。

• 在你的express服务器程序中引入中间件rendertron-middleware

进入项目目录，命令行输入npm install --save express rendertron-middleware，回车
在你的express服务器程序的代码中加入几行：

const express = require('express');
const rendertron = require('rendertron-middleware');

const app = express();

app.use(rendertron.makeMiddleware({
  proxyUrl: 'http://localhost:3000/render',
}));

app.use(express.static('files'));
app.listen(8080);

重点是插入的

app.use(rendertron.makeMiddleware({
  proxyUrl: 'http://localhost:3000/render',
}));

其中rendertron.makeMiddleware有好几个参数，github上说有proxyUrl、userAgentPattern、excludeUrlPattern、injectShadyDom、timeout，也就是有类似以下的设置。

app.use(rendertron.makeMiddleware({
  proxyUrl: 'http://localhost:3000/render',
  userAgentPattern：****，
  excludeUrlPattern：****，
  injectShadyDom：true or false, //这个参数一般不用设，用的时候这行删掉就好了
  timeout：11000，//这个timeout超时参数亲测已经无效了，尴尬，用的时候也去掉这行就好
}));

下面重点讲讲以上的userAgentPattern和excludeUrlPattern参数的含义和怎么设置。

userAgentPattern是用来写清楚哪些UA头需要服务器渲染，除此之外的请求都直接单页面推送。
比如说

const botUserAgents = [
  'Baiduspider',
  'bingbot',
  'Embedly',
  'facebookexternalhit',
  'LinkedInBot',
  'outbrain',
  'pinterest',
  'quora link preview',
  'rogerbot',
  'showyoubot',
  'Slackbot',
  'TelegramBot',
  'Twitterbot',
  'vkShare',
  'W3C_Validator',
  'WhatsApp',
];
//略n行代码
app.use(rendertron.makeMiddleware({
	//其他参数
  userAgentPattern: new RegExp(botUserAgents.join('|'), 'i'),
}));

把你要的爬虫UA头都写到一个数组里，然后用new RegExp()正则一下

excludeUrlPattern是指哪些文件格式需要在chromeheadless中被完全加载，用法如下

const staticFileExtensions = [
  'ai', 'avi', 'css', 'dat', 'dmg', 'doc', 'doc', 'exe', 'flv',
  'gif', 'ico', 'iso', 'jpeg', 'jpg', 'js', 'less', 'm4a', 'm4v',
  'mov', 'mp3', 'mp4', 'mpeg', 'mpg', 'pdf', 'png', 'ppt', 'psd',
  'rar', 'rss', 'svg', 'swf', 'tif', 'torrent', 'ttf', 'txt', 'wav',
  'wmv', 'woff', 'xls', 'xml', 'zip',
];
//略n行代码
app.use(rendertron.makeMiddleware({
	//其他参数
  userAgentPattern: new RegExp(`\.(${staticFileExtensions.join('|')})$`, 'i'),
}));

把你需要加载的文件后缀都写到一个数组里，然后用new RegExp()正则一下

至于proxyUrl参数的用法，如果rendertron+chromeheadless在本地服务器，那就写'http://localhost:3000/render'(rendertron启动后默认开启3000端口)，如果是在别的服务器，那就写http://www.xxxx.com/render或者http://106.xx.xx.xxx:xxxx/render。
proxyUrl参数设置的就是遇到爬虫UA头后、转到rendertron用本地服务器上的chromeheadless浏览器渲染的地址。

• 好了，express服务器改写好后，正常启动他，然后再启动rendertron，方法也很简单，直接命令行输入rendertron就行了。
  下面测试一下，命令行输入curl -A “baiduspider” http://你需要测试的网址(就是访问你的server程序对应的那个网址，即改写前的那个原来的网址)，然后就能看到通过chromeheadless渲染好的html代码，大功告成！

rendertron的改进

whose.design - 发现更多设计工具

whose.design - 发现更多设计工具