GX博客

搜索引擎快照是搜索引擎最近一次收录你的网页后，为用户提供的一个缓存快照。缓存快照的内容不一定与网页现在的实际内容一致，它包含一个的快照创建时间。当实际网页无法打开或打开速度特别慢时，我们可以使用搜索引擎快照预览网页是否含有你需要查找的内容。

对于 React 的同构性应用，界面组件会先在服务器端渲染。在 html 和 js 达到浏览器端后，再由浏览器端 React 为组件添加事件绑定。界面组件的服务器端渲染不仅可以提高用户的加载体现，还可以使搜索引擎能抓取到你页面的内容，从而实现 SEO。

如果你的 React 应用还使用了如 React Router 这样的路由解决方案，那么还需要作一些处理才能使你的网页快照能够正常展示。（要查看自己网站的收录情况，可以使用 site 搜索指令，如搜索 site:www.leeguangxing.cn。）

不同搜索引擎处理快照的方式不太一样。如百度快照，它只会加载你页面的 css 和 html，并去除其它的 script 标签。所以对于百度快照，页面的浏览器端再渲染并不会起作用，你看到的是服务器端渲染结果。但对于如 Google 快照的处理方式，会保留你网页的所有代码，并为其添加对应的快照信息。如此一来，我们预设的 React Router 路由匹配规则就会对不上，最后快照显示的是 404 页面的内容（即使这并没有影响搜索引擎的收录）。为了避免这一问题，我们可以先判断当前页面域名是否与你网站域名一致，再决定是否执行浏览器端渲染：

// 渲染页面
if(window.__INITIAL_STATE__.websiteAddress.indexOf(window.document.domain) !== -1){
    hydrate(
        <App store={store}/>
        , document.getElementById('react-container')
    );
}