Cannot use Gatsby at all :( React component props are always the server-side rendered ones, instead of the browser-rendered ones

[fzyzcjy]

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

Hi thanks for the lib! However, React component props are always the server-side rendered ones, instead of the browser-rendered ones.

Reproduction Link

https://gist.github.com/fzyzcjy/c50a3040b42158e139d6dd94be409ad5

Steps to Reproduce

1. gatsby build && gatsby serve
2. open the webpage
3. use chrome devtool to see: text is "is-browser" while href and class names are "is-ssr". but expect both text and href/class to be "is-browser"!

Expected Result

The href/class should also be "is-browser" instead of "is-ssr".

Actual Result

see above

Environment

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
  Languages:
    Python: 3.7.6 - /Users/tom/opt/anaconda3/bin/python
  npmPackages:
    gatsby: ^3.11.1 => 3.12.0 
    gatsby-disable-404: ^0.2.1 => 0.2.1 
    gatsby-plugin-image: ^1.12.0 => 1.12.0 
    gatsby-plugin-postcss: ^4.12.0 => 4.12.0 
    gatsby-plugin-sharp: ^3.12.0 => 3.12.0 
    gatsby-source-filesystem: ^3.12.0 => 3.12.0

Config Flags

n/a

[LekoArts]

Hi!

This is working as expected. The check is only run during HTML generation and thus is-ssr is used. It's a bad idea to have different styles in the HTML and in the browser as then the rehydration won't work correctly so you should try to avoid doing that.

Use the useEffect hook if you want to do stuff on the client side.

[fzyzcjy]

Thanks! I am using the old style class components. So let me try on componentDidMount and will reply to you after that.

[fzyzcjy]

Then, how can I give it a default value? As shown in #32936 , if the client does not have JS enabled, I want the link href to be hello.com/fallback. Thank you!