抓取 Google 显示空白页 - Reactjs答案

【问题标题】：Fetch As Google Is Showing Blank Page - Reactjs抓取 Google 显示空白页 - Reactjs
【发布时间】：2019-08-09 16:33:15
【问题描述】：

我有一个 Reactjs (v.16.6.3) 页面，它的 SEO 对被 Google 索引很重要。因此，我使用 Fetch as Google 工具对其进行了检查，以了解 Google-bot 从该页面呈现的内容。但是，谷歌什么也没显示，只向我描绘了一个空白页面！我添加了 'babel-polyfill' 来满足 es6-es7-es8 的要求并使 google-bot 高兴，因为我在 ComponentDidMount 中使用了 async-await (es8) 方法（在此生命周期方法中加载异步数据）和其他方法。虽然也使用了流行的箭头功能，但结果在 Fetch as Google 中再次消失了！我什至在导入一些仅从另一个模块导入并直接放入渲染方法（不在 componentDidMount 中）的平面数据（如下面我写的）时没有得到任何结果。我检查并发现它们存在于 main.chunk.js 中，Google 应该充分阅读和呈现它们，但什么也没发生！

           export const sampleData01= [
                    {name: sampleName01,
                     lastName: sampleLastName01,
                     image: sampleImage01 
                     },
               {name: sampleName02,
                     lastName: sampleLastName02,
                     image: sampleImage02 
                     }

                    ]
         export const anotherData02= [
                    {name: anotherName01,
                     lastName: anotherLastName01,
                     image: anotherImage01 
                     },
               {name: anotherName02,
                     lastName: anotherLastName02,
                     image: anotherImage02 
                     }

                    ]


        -----------
        import React, {Component} from 'react'
        import {sampleData01} from './tempData'
        import Helmet from "react-helmet";
        class SampleClass extends Component {
        state = {...something , loading:false}
        async componentDidMount = ()=> {
        this.setState({loading:true})
        ...await fetch something
        this.setState({loading:false})
        }
        }

    render(){
    const data = sampleData01.map(item => {
    <li>
    {item.name}
    </li>
    }
    return (
    <div className="...">
    <Loading loading={this.state.loading}/>
    <div className="...">
    <Helmet  link={....}   title={....} meta={....}  />
    <ul>
    {data}
    </ul>
    </div>    

    </div>

    )


    }

    export default SampleClass

在开发模式和生产模式下，一切都运行良好。我检查了所有可能的方法，例如 importimg es6-shim、isomorphic-fetch、url-search-params-polyfill、whatwg-fetch，但没有得到任何结果！我在一些文章中读到谷歌可能会使用 phantomjs 来渲染页面。我自己在网络上（不是本地）签出了带有 phantomjs 的页面，它显示和渲染得非常好。我读过很多文章说谷歌搜索和 SPA 没有问题，而我看到的是别的东西！看来我应该转向 SSR 以获得更方便的方式来确保拥有 SEO 友好的页面。

【问题讨论】：

如果 SEO 对您很重要，最好切换到 SSR。有时谷歌可能无法读取您在 ComponentDidMount 之后发生的重新渲染。

标签： reactjs seo single-page-application ecmascript-2017 babel-polyfill

【解决方案1】：

我尝试了很多肮脏的技巧来改善客户端渲染网站的 SEO，但最终 SSR 是唯一的选择。使用或使用 Razzle (https://github.com/jaredpalmer/razzle) 或 Next.js (https://github.com/zeit/next.js/) 制作您自己的 SSR 项目

【讨论】：