十行代码实现React App 的SEO优化
搜索引擎真的需要已经预渲染的应用吗？
谷歌已经明确表示，他们会在抓取你的网站之前运行你的JavaScript代码。准确地说，他们的爬虫(crawler)中运用 Chrome 41浏览器打开网站，和真实用户用浏览器打开一样！但是还有其他搜索引擎和社交媒体网站可能并不会这么做。
我知道人们太关心搜索引擎优化了，总是试图尽可能地提高。很自然的，每个人都想在不运行任何JavaScript的情况下直接显示搜索引擎的内容。这不是一个坏主意，相信很多人都这么尝试过。
*这不仅有利于搜索引擎优化 *，而且还具一些性能优势。浏览器不必等待JS文件加载后才开始渲染，首次有效渲染(First Contentful Paint)的时间会更短。
react App 如何预渲染？
原理其实很简单，在我们使用npm run build构建React App后，我们用真实浏览器渲染build目录(通常是index.html), 然后获取产生的HTML代码保存到一个文件中，只是所有的内部页面都需要重复相同的操作。
感谢react-snap 让这一切变得简单。
- 在 dev 依赖中安装 npm i -D react-snap
- 在package.json 的 scripts 中添加"postbuild": "react-snap"
- 运行npm run build
What it will do is after the normal build, it will run react-snap which will render them in a Puppeteer browser, scrape content and generate new build.
在build之后，将运行react-snap，在无头浏览器(Puppeteer browser)中渲染，抓取内容并产生新的build。
{
"scripts": {
"postbuild": "react-snap"
},
"reactSnap": {
"skipThirdPartyRequests": true
},
"devDependencies": {
"react-snap": "^1.23.0"
}
}
和原作者一样，我在尝试react-snap的时候，也碰到了一些问题，例如著名的'Protocol error (Runtime.callFunctionOn): Object reference chain is too long' }, 一般在官方问题都能找到相应的解决方案，或者你选择StackOverFlow。
所以当我们在使用第三方脚本的时候，应该尽可能对他们多一些了解，比如有哪些限制或者是options， 请参考文档。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
