Rendering wrong HTML on hard refresh of app

Hey, pretty strange issue I’m seeing.

When I hard refresh my app on a client only path (like id’d item detail pages), the page renders incorrectly with artifacts from the 404 page that had initially redirected it (see below). My 404 page has a spinner is an intermediary until the client side path resolves to the new page. On this hard refresh, for some reason, high level wrapping div styling is being left on the container causing my app to render improperly.

This only happens when distributed to Cloudfront/S3. It does not happen on a soft refresh. It does not happen at all in local development.

Left is with the artifacts of the 404 page, right is what is supposed to be rendered for that page.

Let me know what other information I can provide for this. It’s pretty strange… Any help would be appreciated. Something is going wrong it seems in the redirect from the 404 page to resolving to the correct route as the app initiates.

========

App is distributed on S3 + CloudFront

Config

    {
      resolve: `gatsby-plugin-s3`,
      options: {
        bucketName: process.env.GATSBY_APP_URL,
        protocol: 'https',
        hostname: process.env.GATSBY_APP_URL,
        generateMatchPathRewrites: false,
      },
    },

[jariz]

Yep, interested to see if you have the same results with npx gatsby build && npx gatsby serve. During local development, gatsby runs as an SPA only, so this sounds like a typical client & server render mismatch.

With react it is important to keep in mind that, when hydrating, it expects the server side and client side to return the same HTML. If the 2 differ, things can get very unstable.

You need to make sure the client & server render the same result, and use useEffect to do any clientside specific things. In the past react used to warn about this and do a full rerender if the HTML it’s hydrating does not match the client side render, but in recent versions it does not do these checks anymore for the sake of performance.

[MartinDawson]

I figured out the issue and @jariz was correct.

In this case where the html is rendered incorrectly it’s an issue with our own code. The problem lies in the SSR being different than the client side.

In my case it was the wrong layouts rendering for client routes.

For example, I am using gatsby-plugin-layout and here was my layouts code before:

return ( <Container maxWidth={false} key={0}> <Header /> {isLoaded ? children : null} <TTTabs /> </Container> );

Here it is after (working):

return isLoaded ? ( <Container maxWidth={false} key={0}> <Header /> {children} <TTTabs /> </Container> ) : null;

Horrible bug to fix as gatsby doesn’t warn.