wrapPageElement and wrapRootElement Remount Layout Component on Page Navigation after redeploying to production Environment on Chrome After Upgrading to Gatsby 4.25.9 or 5.13.7

[pengyiwang]

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

Thank you for taking the time to look into this issue. I recently upgraded my Gatsby project from version ^2.32.0 to 4.25.9 or 5.13.7, and encountered an issue that only occurs in the production environment on Chrome.

Summary:

Issue Description: After redeploying to the production environment, the layout component used in wrapPageElement or wrapRootElement remounts on page navigation when using navigate or Link.

Conditions:

The issue only occurs on Chrome.

The issue disappears if I disable the browser cache in Chrome DevTools.

The issue disappears if I change cache setting to no-store on Firebase hosting

The issue only appears after redeploying to production. It does not occur when the app is opened for the first time or when using an incognito window.

No issue was observed in version ^2.32.0, but it started appearing after upgrading to 4.25.9 or 5.13.7.

The issue does not occur on Safari and Firefox.

Previous Attempts: I've attempted to use wrapRootElement and changed navigate to Link, as recommended in issue #16489, but the issue persists.

Reproduction Link

Unfortunately, I cannot provide a reproduction link as the issue only occurs after redeploying to production.

Steps to Reproduce

First Screenshot: Shows the network tab in Chrome, highlighting the repeated request of app-xxx.js when cache is enabled.

Second Screenshot: Shows the same page when cache is disabled — the repeated request does not occur.

Expected Result

The layout component should not remount when navigating to a new page after redeploying the app to production.

Actual Result

The layout component remounts when navigating to a new page after redeploying the app to production, only on Chrome.

Environment

Gatsby Version: 4.25.9

Hosting: Firebase Hosting

OS and Browser: macOS (Chrome only)

Caching: Disabling cache in Chrome removes the issue.

Config Flags

flags: process.env.NODE_ENV === 'development' ? {
    FAST_DEV: true,
  } : {},

[pengyiwang]

I confirmed it, the issue also happens on version 5.13.7, and it only happens on Chrome, but not on Safari and Firefox, tested on several Mac