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

gatsbyjs · Sep 10, 2021 · a128345 · a128345
1 parent 709271e
commit a128345
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js
@@ -141,6 +141,13 @@ export class BaseLoader {
             throw new Error(`not a valid pageData response`)
           }
 
+          if (window.serverData) {
+            // merge inlined serverData for page-data response for initial page
+            // and unset window.serverData
+            jsonPayload.result.serverData = window.serverData
+            window.serverData = null
+          }
+
           return Object.assign(loadObj, {
             status: PageResourceStatus.Success,
             payload: jsonPayload,

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,
+  extraPageMetadata = ``,
 }) {
   // 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 = []
@@ -393,7 +394,7 @@ export default async function staticPage({
     })
 
     // Add page metadata for the current page
-    const windowPageData = `/*<![CDATA[*/window.pagePath="${pagePath}";/*]]>*/`
+    const windowPageData = `/*<![CDATA[*/window.pagePath="${pagePath}";${extraPageMetadata}/*]]>*/`
 
     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,10 @@ export async function renderHTML({
     pageData,
     staticQueryContext,
     ...data.templateDetails.assets,
+    extraPageMetadata:
+      data.page.mode && data.results.serverData !== `SSR`
+        ? `window.serverData=${JSON.stringify(data.results.serverData)};`
+        : undefined,
   })
 
   return results.html