React app SEO优化之预渲染

阅读本文只须要2分钟

搜索引擎真的须要已经预渲染的应用吗？

谷歌已经明确表示，他们会在抓取你的网站以前运行你的JavaScript代码。准确地说，他们的爬虫(crawler)中运用 Chrome 41浏览器打开网站，和真实用户用浏览器打开同样！可是还有其余搜索引擎和社交媒体网站可能并不会这么作。

我知道人们太关心搜索引擎优化了，老是试图尽量地提升。很天然的，每一个人都想在不运行任何JavaScript的状况下直接显示搜索引擎的内容。这不是一个坏主意，相信不少人都这么尝试过。

*这不只有利于搜索引擎优化 *，并且还具一些性能优点。浏览器没必要等待JS文件加载后才开始渲染，首次有效渲染(First Contentful Paint)的时间会更短。

React App 如何预渲染？

原理其实很简单，在咱们使用npm run build构建React App后，咱们用真实浏览器渲染build目录(一般是index.html), 而后获取产生的HTML代码保存到一个文件中，只是全部的内部页面都须要重复相同的操做。

感谢react-snap 让这一切变得简单。

1. 在 dev 依赖中安装  npm i -D react-snap
2. 在package.json 的 scripts 中添加"postbuild": "react-snap"
3. 运行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， 请参考文档。

原文地址：coffeencoding.com/prerender-r… 感谢做者 Gijo Varghese