阅读本文只需要 2 分钟
image.PNG
搜索引擎真的需要已经预渲染的应用吗?
谷歌已经明确表示, 他们会在抓取你的网站之前运行你的 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' }, 一般在官方问题都能找到相应的解决方案, 或者你选择 Stack Overflow.
所以当我们在使用第三方脚本的时候, 应该尽可能对他们多一些了解, 比如有哪些限制或者是 options, 请参考文档.
来源: http://www.jianshu.com/p/56ca46c90ee2