背景：因为客户的网站需要分享到facebook这类可以抓取到meta信息的网站上，因为爬虫指挥爬取静态的页面，而使用js生成的动态的title和descroption之类的seo信息是没办法抓取到的，所以就用到了react-helment去生成meta信息，同时需要使用prerender-spa-plugin将页面变成静态页面，生成类似服务端渲染的效果。
react-helment的使用
react-helment的github地址
使用yarn或者npm都可以安装
yarn add react-helmet或者npm install --save react-helmet
因为网站是中英文的，所以需要根据语言来生成不同的title，description等信息
可以直接在App.tsx里面使用
<Helmet>
<title>
{ language === 'zh-tw' ? '中文标题' : 'english title' }
</title>
<meta name="description" content={
language === 'zh-tw' ? "中文描述" : 'english description' }
/>
</Helmet>
这样的话就会生成对应的信息了。
注意：最好把index.html里面的title和description信息删掉，因为不删除的话，会出现两个title两个description
做到这里只是成功了一半，这样的话在facebook分享的时候还是不能获取相应的结果，因为这样生成的还是属于动态的标签，所以这时候就需要prerender-spa-plugin登场了
prerender的github地址
安装的话还是老样子，直接说配置了
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '../build'),
indexPath: path.join(__dirname, `../build${paths.servedPath}`, 'index.html'),
outputDir: path.join(__dirname, `../build${paths.servedPath}`),
routes: [
'/',
...[].concat.apply([], allPrerenderRoutes)
],
}),
这个是我的配置，
- staticDir：是使用哪个文件夹作为模板目录
- indexPath：是哪个作为索引的文件，一般都是index.html
- outputDir：输出目录，就是指prerender生成的内容放在那里
- routes：代表你想用prerender生成那些目录
routers:['en', 'cn', 'en/a', 'en/b],这样的话就会生成en,cn两个主文件夹，en文件夹下面还会有a和b两个文件夹，每个文件夹下面都会有index.html。
路径不能用hash模式，只能用history模式
可能会遇到的问题：
Chromium revision is not downloaded. Run "npm install" or "yarn install"建议直接使用cnpm安装prerender，血与泪的教训。
