seo Question posted in
Some basic information to get you started with this can be found here.

Prerendering React app – SEO

I have an application using React, React Router, Redux and Webpack for bundling, basically the problem is the client said that the SEO is bad because the content or the way on React render the app, because if you go to see the source is not there, I understand that the Googlebot can crawl an SPA, I checked the Fetch as Google and the pages are rendering good, but the client feels that is is the problem.
I tested with react-snapshot, prerender-spa-plugin, static-site-generator-webpack-plugin, and also Next but anyone of these does not work for me. I want to know if exists a way to resolve this without changing the project structure or at least reasons or an explanation to not do this. Thanks

Tags:

2

Answers


  1. 0

    Basically, you can do this with React’s server-side rendering feature.

    For each function, in the Node.js server that responds to the request for the page:

    1. require(..) your root component.
    2. require(..) your redux store
    3. Call actions to move the store to the state the page needs – including fetching any data that it needs
    4. Pass the store to your root component and call ReactDOMServer.renderToString on it. Note react router has special handling for server-side rendering so read that.
    5. Server that HTML to the user under the root element in your markup.
    6. Call ReactDOM.hydrate on it with your store on the client side.

    Alternatively if your code has window.x all around and can’t run in Node.js – you can do something else just for SEO:

    1. Detect whether or not a user is Googlebot – with spider-detector for example.
    2. If it is, use puppeteer to get the content of the HTML page
    3. Serve that content to the spider instead – since it will wait for AJAX calls to finish and the state will be solid. Since this is expensive you want to cache pages for at least a few minutes.

    Note that regular users still get the regular React site as they are not detected as crawlers.

    Login or Signup to reply.
  2. 0

    Basically agree with the idea upstairs (Benjamin Gruenbaum)
    The difference is that I use puppeteer directly.

    1. When the project is packaged, start a headless puppeteer,The headless puppeteer will not send any ajax, it can get a skeleton diagram .
    2. get the static content of the page, and replace your html.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search