CODEWITHSUNDEEP
javascriptreactjsgatsbynetlifyprerender
Florian Bienefelt
Florian Bienefelt

Reputation: 1578

prerenderReady on a Gatsby website with Netlify

We've started seeing 504 errors on our Gatsby website served by Netlify. The issue comes from activating prerender.io, and it frequently times out after 10 seconds, causing google bots to detect the error, and now our ads are being rejected because our website supposedly has errors (regular users are not affected).

prerender.io explains that we should set window.prerenderReady = true; when the page is ready: https://docs.prerender.io/article/11-best-practices

So in your Gatsby website, where would you toggle this flag to true? What's the right place?

I already added the prerenderReady = false like this in gatsby-ssr.js:

const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents();

  const newHead = [
    <script key="prerender"> window.prerenderReady = false; </script>,
  ].concat(headComponents);

  replaceHeadComponents(newHead);
};

Upvotes: 0

Views: 231

Answers (1)

coreyward
coreyward

Reputation: 80041

If you are not dynamically rendering client-side content you don't need to use a service like Prerender.io with Gatsby. Your pages will be rendered server-side during the build stage and be available to crawlers without any additional effort.

In the unlikely case that you are doing some sort of dynamic, client-side rendering, you would be the best person to know when that content is ready and available on the page—it is likely after you've updated state and React has had an opportunity to re-render the relevant component(s) and update the DOM.

Upvotes: 1

Related Questions