Search code examples
reactjswebseositemap

Is there a way to make Google wait until all data is loaded for my React website hosted on Firebase with a DB from Firebase before indexing?


I created a Website for my Wife's Blog in React and am hosting it on Firebase. I also use DB from firebase.

After the site release I found out that Google is not waiting until all data is finally loaded from the site to index the final site, but is trying to index a loading site.

For now I solved the issue with prerender with the following package (as per simple implementation in our site): https://github.com/egoist/presite

The Issue of it is it prerenders only the English (default) site and not any other languages so indexing is mostly done on English sites (other languages are ignored) and as the site is prerendered Google sometimes loses the index of the site because of it.

I also checked multiple other prerender options but currently no other has the simplicity of implementation and support of dynamic site (some sites --> each recipe has a template site that is loaded from DB and rendered on the client).

Any Ideas how to solve these issue? Possible to use without prerender and get Google wait on loading data for the site?

For Information/check the site itself: https://fromapot.com/


Solution

  • SEO is known problem of SPA websites built with front-end frameworks/libraries. The only options are to: prerender or use SSR (Server Side Rendering).

    For your case, I would suggest using the second option since you want to have dynamic indexing depending on language.

    When using SSR, you typically need a NodeJS server that listens to requests and creates the initial layout based on the requested route on the server. This layout is then sent to the front-end along with some additional information, which allows the rest of the website to function properly.

    Most easy and powerful way to do that is NextJS framework, but depending on your build system, you may have other options. For example, for Vite, there is a simple plugin which enables SSR with almost zero effort.

    There is no way to configure that Google waits for dynamic front-end render because it will require Google to support JS runtime which is too heavy for indexing engine which visits probably millions of websites each day.