Gatsby session check and SEO

Question

I’m making app-ish gatsby website with authentication. Im displaying user menu in header if user is logged in, and login button if not.

Until session is checked, I dont know if I should show menu or login button. Because of that I decided not to show website at all initially (if session cookie/token is not detected, website is loaded almost immediately, but initially its blocked too), until session information comes back from backend.

I did this by simply creating session reducer with initial state variable „checked” set initially to false - website shows content only when this variable is set to true, what happens after session check or after token/cookie presence check.

But, from what I understand, if I block website until session is checked and no content is shown I lose all static seo power of gatsby. I mean google bots won’t scan my website if theres no content shown initially. Am I correct?

What would be your approach to this problem? Changing from „log in” button (or not showing it at all initially) to usermenu in header looks weird.

Answer 1

In order for SEO to be correct, you can add loading in the menu and login button areas when detect.

Answer 2

But, from what I understand, if I block website until session is checked and no content is shown I lose all static seo power of gatsby. I mean google bots won’t scan my website if theres no content shown initially. Am I correct?

Yes and no. If you block all your website before you check the cookie, yes. However, if you are only blocking the header part to show/hide one button or another, you are not blocking the statically of Gatsby. In addition, keep in mind that Google bots always make various crawls; one the check the "static" content (without JavaScript) and one of them awaiting the JavaScript response/rendering.

In your case, if you are only checking a local variable to decide which component render, you are not losing the SEO power of Gatsby, since you are only rendering (or not) a small piece of code.

In the worst case that the crawler wasn't able to detect that small piece of code, the SEO impact is meaningless, it won't affect the overall performance only to show/hide a component.

For further details about Google's crawlers check the docs.

What would be your approach to this problem? Changing from "log in” button (or not showing it at all initially) to usermenu in header looks weird.

I would say the best approach is the best UX response, since the SEO impact is meaningless. It may not be intuitive for a user to see a "Log in" button and once the cookie/reducer is checked change it suddenly to another content. I would prefer to awaiting the variable.