fix(gatsby): fix hydration flicker on initial render of ssr page (#33134

) * inline page-data object in html when it contains serverData * skip settting page-data preload link header for ssr pages
gatsbyjs · Sep 13, 2021 · 44afaf5 · 44afaf5
1 parent f1141a0
commit 44afaf5
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 21 deletions.
diff --git a/...ages/gatsby-plugin-gatsby-cloud/src/__tests__/__snapshots__/build-headers-program.js.snap b/...ages/gatsby-plugin-gatsby-cloud/src/__tests__/__snapshots__/build-headers-program.js.snap
diff --git a/packages/gatsby-plugin-gatsby-cloud/src/__tests__/build-headers-program.js b/packages/gatsby-plugin-gatsby-cloud/src/__tests__/build-headers-program.js
@@ -125,6 +125,22 @@ describe(`build-headers-program`, () => {
             pluginCreatorId: `049c1cfd-95f7-5555-a4ac-9b396d098b26`,
           },
         ],
+        [
+          `/test/`,
+          {
+            jsonName: `test`,
+            internalComponentName: `ComponentTest`,
+            path: `/test/`,
+            matchPath: undefined,
+            componentChunkName: `component---src-pages-test-js`,
+            isCreatedByStatefulCreatePages: true,
+            context: {},
+            updatedAt: 1557740602361,
+            pluginCreator___NODE: `049c1cfd-95f7-5555-a4ac-9b396d098b26`,
+            pluginCreatorId: `049c1cfd-95f7-5555-a4ac-9b396d098b26`,
+            mode: `SSR`,
+          },
+        ],
         [
           `/`,
           {
@@ -203,8 +219,8 @@ describe(`build-headers-program`, () => {
     expect(output).toMatchSnapshot()
     expect(output).toMatch(/app-data\.json/)
     expect(output).toMatch(/page-data\.json/)
-    // we should only check page-data & app-data once which leads to 2 times
-    expect(fs.existsSync).toBeCalledTimes(2)
+    // we should only check app-data once which leads to 1 time
+    expect(fs.existsSync).toBeCalledTimes(1)
   })
 
   it(`with manifest['pages-manifest']`, async () => {
@@ -237,7 +253,7 @@ describe(`build-headers-program`, () => {
     expect(output).toMatchSnapshot()
     expect(output).toMatch(/\/pages-manifest-ab11f09e0ca7ecd3b43e\.js/g)
     expect(output).not.toMatch(/\/app-data\.json/g)
-    expect(output).not.toMatch(/\/page-data\.json/g)
+    expect(output).toMatch(/\/page-data\.json/g)
     expect(output).not.toMatch(/\/undefined/g)
   })
 

diff --git a/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js b/packages/gatsby-plugin-gatsby-cloud/src/build-headers-program.js
@@ -100,15 +100,6 @@ function preloadHeadersByPage({ pages, manifest, pathPrefix, publicFolder }) {
   const appDataPath = publicFolder(PAGE_DATA_DIR, `app-data.json`)
   const hasAppData = existsSync(appDataPath)
 
-  let hasPageData = false
-  if (pages.size) {
-    // test if 1 page-data file exists, if it does we know we're on a gatsby version that supports page-data
-    const pageDataPath = publicFolder(
-      getPageDataPath(pages.get(pages.keys().next().value).path)
-    )
-    hasPageData = existsSync(pageDataPath)
-  }
-
   pages.forEach(page => {
     const scripts = _.flatMap(COMMON_BUNDLES, file =>
       getScriptPath(file, manifest)
@@ -121,7 +112,9 @@ function preloadHeadersByPage({ pages, manifest, pathPrefix, publicFolder }) {
       json.push(posix.join(PAGE_DATA_DIR, `app-data.json`))
     }
 
-    if (hasPageData) {
+    // page-data gets inline for SSR, so we won't be doing page-data request
+    // and we shouldn't add preload link header for it.
+    if (page.mode !== `SSR`) {
       json.push(getPageDataPath(page.path))
     }
 

diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js
@@ -487,7 +487,7 @@ const createComponentUrls = componentChunkName =>
   )
 
 export class ProdLoader extends BaseLoader {
-  constructor(asyncRequires, matchPaths) {
+  constructor(asyncRequires, matchPaths, pageData) {
     const loadComponent = chunkName => {
       if (!asyncRequires.components[chunkName]) {
         throw new Error(
@@ -504,6 +504,14 @@ export class ProdLoader extends BaseLoader {
     }
 
     super(loadComponent, matchPaths)
+
+    if (pageData) {
+      this.pageDataDb.set(pageData.path, {
+        pagePath: pageData.path,
+        payload: pageData,
+        status: `success`,
+      })
+    }
   }
 
   doPrefetch(pagePath) {

diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js
@@ -25,7 +25,7 @@ import stripPrefix from "./strip-prefix"
 // Generated during bootstrap
 import matchPaths from "$virtual/match-paths.json"
 
-const loader = new ProdLoader(asyncRequires, matchPaths)
+const loader = new ProdLoader(asyncRequires, matchPaths, window.pageData)
 setLoader(loader)
 loader.setApiRunner(apiRunner)
 

diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js
@@ -110,6 +110,7 @@ export default async function staticPage({
   scripts,
   reversedStyles,
   reversedScripts,
+  inlinePageData = false,
 }) {
   // for this to work we need this function to be sync or at least ensure there is single execution of it at a time
   global.unsafeBuiltinUsage = []
@@ -330,7 +331,7 @@ export default async function staticPage({
       )
     })
 
-    if (pageData) {
+    if (pageData && !inlinePageData) {
       headComponents.push(
         <link
           as="fetch"
@@ -393,7 +394,9 @@ export default async function staticPage({
     })
 
     // Add page metadata for the current page
-    const windowPageData = `/*<![CDATA[*/window.pagePath="${pagePath}";/*]]>*/`
+    const windowPageData = `/*<![CDATA[*/window.pagePath="${pagePath}";${
+      inlinePageData ? `window.pageData=${JSON.stringify(pageData)};` : ``
+    }/*]]>*/`
 
     postBodyComponents.push(
       <script

diff --git a/packages/gatsby/src/utils/page-ssr-module/entry.ts b/packages/gatsby/src/utils/page-ssr-module/entry.ts
@@ -165,6 +165,7 @@ export async function renderHTML({
     pageData,
     staticQueryContext,
     ...data.templateDetails.assets,
+    inlinePageData: data.page.mode === `SSR` && data.results.serverData,
   })
 
   return results.html