Search code examples
javascriptcssreactjscachingprerender

Code splitting causes css chunks to be outdated resulting in google Indexed cached pages being raw HTML

Been looking for a solution for this issue quite a while. Quick intro: Our build is ReactJS for frontend. We use Prerender.io to cache pages prior to indexing bots requesting the cached url. Cloudflare is our CDN.

Our pages are indexed properly by google as can be seen here:

Google Results

But when clicking on the indexed result we get something like this:

Google Indexed Result

I'm pretty sure at this point that the root issue is that we use code-splitting where possible, and on every deploy with Heroku the chunk names change (we deploy new versions at least 1-2x a week). That means that prerender.io still serves old versions to indexing bots like googlebot with outdated css chunks, resulting in a raw version of the page being displayed as the indexed pathnames for css files don't exist anymore.

Does anyone have a solution, or idea for a solution to this issue? Thanks a lot!

Solution

  • I had the same exact issue, also using ReactJS and Cloudflare. I was able to resolve this by going into my Cloudflare speed settings, and then optimization where I had to turn OFF the Brotli compression option (under content optimization) and 0-RTT Connection Resumption (Under protocol optimization). Then I deleted the cached pages under the prerender.io cache manager and tested again with Google's webmaster live tool where everything went back to normal.