Gatsby blinks an inner page before showing the home page.

[ZeldOcarina]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Dear Gastby Community,
I have completed a Gatsby Js project, deployed to Vercel:

https://www.majidtabs.com/

The website is blinking with an inner page (call prep guide) before showing (how it's supposed to) the home page.

Here's the project repo, it's open source:
https://github.com/ZeldOcarina/majiid-landing-page

I thinked I followed the folder and file structure and what not but let me know if I made any mistakes. Gatsby version is 3.11.1.

Thanks a lot!

Reproduction Link

https://github.com/ZeldOcarina/majiid-landing-page

Steps to Reproduce

1. Just go to the live website at https://www.majidtabs.com/

Expected Result

The home page should appear first.

Actual Result

The secondary (inner) page is the first to flash before the home page is parsed.

Environment

System:
    OS: macOS 11.5.2
    CPU: (8) x64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.20.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 92.0.4515.159
    Safari: 14.1.2
  npmPackages:
    gatsby: ^3.11.1 => 3.11.1 
    gatsby-plugin-image: ^1.11.0 => 1.11.0 
    gatsby-plugin-react-helmet: ^4.12.0 => 4.12.0 
    gatsby-plugin-sass: ^4.11.0 => 4.11.0 
    gatsby-plugin-sharp: ^3.11.0 => 3.11.0 
    gatsby-plugin-sitemap: ^4.7.0 => 4.7.0 
    gatsby-plugin-styled-components: ^4.11.0 => 4.11.0 
    gatsby-plugin-webfonts: ^2.1.1 => 2.1.1 
    gatsby-source-contentful: ^5.11.1 => 5.11.1 
    gatsby-source-filesystem: ^3.11.0 => 3.11.0 
    gatsby-transformer-sharp: ^3.11.0 => 3.11.0 
  npmGlobalPackages:
    gatsby-cli: 3.11.0

Config Flags

No response

[graysonhicks]

Just confirming that the hosting server is returning the markup for your call-prep page upon request to your url:

Disabling Javascript in the browser shows the site never redirects to the correct homepage.

If you run gatsby build && gatsby serve locally, do you see the same issue? I cannot because I do not have env values.

[ZeldOcarina]

Hi @graysonhicks thanks a lot for your pointer. It's correct if I serve the assets locally and disable JS I've got the exact same result: the call page is displayed instead of the home page!
If you strictly need the envs I can share those as the contentful keys are not strictly secrets, those are off the repo just to stick to best practices.

[ZeldOcarina]

Hi I marked this as bug but it was moved to "discussions" without any feedbacks. Is there something wrong in my code I haven't spotted that is causing this behaviour?

[graysonhicks]

@ZeldOcarina Can you make a copy of this site on Gatsby Cloud and send me the info so I can debug further? Thanks.

[ZeldOcarina]

Hi! Thanks a lot for your time.

I've moved the website there. Here is the link: https://majidtabs.gatsbyjs.io/
For some reason in this specific CDN all Vimeo videos are erroring despite the domain having been whitelisted.
Here's the build link: https://www.gatsbyjs.com/dashboard/24021c26-48c0-4f7d-84e0-be6a82d27cbb/sites/f650bcb2-4819-4ceb-a04d-71505e66c174/builds/a27a786e-62ef-4d4b-9587-81826e539a99/details#functions

Let me know if you need any more data! :)

[ZeldOcarina]

Hi! Does anyone have any suggestions? The bug is still there.. :(

[ZeldOcarina]

I have tried removing the page entirely, clearing the cache, removing the public folder and rebuild and the index.html file still has the old page in it, it's SO weird, I think this is a bug and should be brought back to the bugs tab...

[graysonhicks]

I am able to reproduce on yours, but not on any other sites. 🤔

[ZeldOcarina]

I FINALLY got the issue.. it’s in the navbar.

Basically since it returns conditionally on the location got from the router props, it blinks the secondary navbar, only to correct it later when js is parsed.

I first thought it was blinking the whole secondary page but it wasn’t the case, only the navbar.

Probably the router props are not in ssr as the condition is obviously dynamical and depends on the runtime.

Thanks for your patience and if you have any simple task I can help with Gatsby development, I’ll be happy to help! :)