Gatsby StaticQuery and Rendered HTML

user_144172 0
Viewed 396

I'm struggling to find out how <StaticContent> behaves.

If I disable javascript in my app, everything inside a <StaticContent> will not be rendered. Is this the intended behavior?

There is a way to workaround it?

A partial code sample:

const Sample = (props: any) => (
  <StaticQuery
    query={graphql`
      query {
        site {
          siteMetadata {
            siteTitle
            siteTitleShort
          }
        }
      }
    `}
    render={(data) => (
      // THIS CODE WILL NOT BE RENDERED IF JAVASCRIPT IS DISABLED
      // YOU'LL NOT BE ABLE TO FIND IT BY LOOKING INTO THE GENERATED HTML FILE.
      <p>{ JSON.stringify(data) }</p>
    )}
  />
);
static-site gatsby reactjs node.js javascript
1 Answers

It's not that easy, Gatsby is generating critical portions of the app that are shown on page load, and then the page is rehydrated with React, meaning that it first shows critical HTML and CSS and only after that load dynamic parts of the site. So if you use some additional react components which could not be prerendered they will not work but the site as a whole should work.

If you are using service workers and disabled JS from devtools then it could be a cache issue. Try to disable javascript from the browser preferences and run the website from the Incognito window without devtools open. GatsbyJS based website will show you a <noscript> message so, answering:

If I disable javascript in my app, everything inside a <StaticContent> will not be rendered. Is this the intended behavior?

Yes, of course. Gatsby is a React-based framework, so you need JavaScript enabled.

Your website will be faster and use less data with PWA and service workers enabled, which do need JavaScript.

From this GitHub thread (you may find some other useful information):

If you disable Javascript in preferences etc then this does work. The reason this is failing is because when you disable JS in the developer tools it doesn't disable the service worker cache, so Gatsby loads the app shell fallback, which is empty without JS. If you disable JavaScript in your normal (non developer) settings, then the browser will bypass the service worker cache and load the rendered page as expected. To reproduce, go to chrome://settings/content/javascript and disable JS, and your link works.

I think this is fine. The only person likely to disable JavaScript using the developer tools is the site developer themselves. If someone is disabling it for security (or any other non-testing) reason they will use chrome://settings or about:preferences. It works as expected then.

There is a way to workaround it?

Not inside the box of Gatsby, they provide some SSR (Server-Side Rendering) APIs that makes it doable (if you feel brave). onPreRenderHTML hook in gatsby-ssr.js, is what you are looking for, especially for JavaScript bundles you would want to use getHeadComponents and filter out JavaScript ones (or just all script tags, and use replaceHeadComponents with a filtered list of components. Might need to check "pre-body components" and "post-body components"

Other useful resources:

user_55853710
Related