CODEWITHSUNDEEP
reactjsseosingle-page-applicationecmascript-2017babel-polyfill
2019
2019

Reputation: 81

Fetch As Google Is Showing Blank Page - Reactjs

I have a Reactjs (v.16.6.3) page which its SEO is important to be indexed by Google. Therefore, I checked it with Fetch as Google tool to know what Google-bot renders from this page. However, google shows nothing and only depicts a blank page to me! I have added 'babel-polyfill' to fulfill es6-es7-es8 requirement and make google-bot happy since I have used async-await (es8) approach in ComponentDidMount (to load async data in this lifecycle method) and other methods. Also popular arrow functions have been used though and result is nothing in Fetch as Google again! I even get no result while importing some flat data (like the following I have written) which are only imported from another module and put directly to render method (not in componentDidMount). I have checked and found that they exist to main.chunk.js and Google should read and render them adequately but nothing happened!

           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

eveything is working fine on both dev and production mode. I have checked every possible ways such as importimg es6-shim, isomorphic-fetch, url-search-params-polyfill, whatwg-fetch and got no result! I have read in some article that google might use phantomjs for rendering page. I have checked out page with phantomjs by myself in the web (not local) and it shows and renders perfectly fine. I have read lots of articles say there is no issue with Google search and SPAs while I am seeing something else! It seems I should shift to SSR for more convenient way to ensure having SEO friendly page.

Upvotes: 0

Views: 367

Answers (1)

Rishabh Rawat
Rishabh Rawat

Reputation: 859

I have tried so many dirty hacks to improve SEO for Client Side rendering website but in the end SSR was the only option. Either make your own SSR project using or using Razzle (https://github.com/jaredpalmer/razzle) or Next.js (https://github.com/zeit/next.js/)

Upvotes: 1

Related Questions