Merge pull request #1 from platform/CON-6966

CON-6966 Disable hydration after full page load

Author: lhagenWP

src/LazyHydrate.js

@@ -78,7 +78,7 @@ export default makeHydrationBlocker(Placeholder, {
     triggerHydration: {
       immediate: true,
       handler(isTriggered) {
-        if (isTriggered) this.hydrate();
+        if (isTriggered && this.hydrate) this.hydrate();
       },
     },
   },

src/utils/disabled.js

@@ -0,0 +1,16 @@
+const isServer = typeof window === 'undefined';
+let isPageLoaded = false;
+
+if (!isServer) {
+  // load event fires when document with all scripts is loaded,
+  // so after hydration process is finished
+  window.addEventListener('load', () => {
+    isPageLoaded = true;
+  });
+}
+
+export function isHydrationDisabled() {
+  // hydration may be disabled because we are in SSR context
+  // or page was fully loaded & hydrated, so it's not needed anymore
+  return isServer || isPageLoaded;
+}

src/utils/hydration-blocker.js

@@ -1,21 +1,30 @@
 import { makeHydrationObserver } from './hydration-observer';
 import { makeHydrationPromise } from './hydration-promise';
 import { makeNonce } from './nonce';
+import { isHydrationDisabled } from './disabled';
 
 export function makeHydrationBlocker(component, options) {
   return Object.assign({
     mixins: [{
       beforeCreate() {
         this.cleanupHandlers = [];
-        const { hydrate, hydrationPromise } = makeHydrationPromise();
-        this.Nonce = makeNonce({ component, hydrationPromise });
-        this.hydrate = hydrate;
-        this.hydrationPromise = hydrationPromise;
+
+        if (isHydrationDisabled()) {
+          this.Nonce = component;
+        } else {
+          const { hydrate, hydrationPromise } = makeHydrationPromise();
+          this.Nonce = makeNonce({ component, hydrationPromise });
+          this.hydrate = hydrate;
+          this.hydrationPromise = hydrationPromise;
+        }
       },
       beforeDestroy() {
         this.cleanup();
       },
       mounted() {
+        // hydration is disabled
+        if (!this.hydrate) return;
+
         if (this.$el.nodeType === Node.COMMENT_NODE) {
           // No SSR rendered content, hydrate immediately.
           this.hydrate();

src/utils/nonce.js

@@ -1,5 +1,3 @@
-const isServer = typeof window === `undefined`;
-
 function isAsyncComponentFactory(componentOrFactory) {
   return typeof componentOrFactory === `function`;
 }
@@ -12,7 +10,5 @@ function resolveComponent(componentOrFactory) {
 }
 
 export function makeNonce({ component, hydrationPromise }) {
-  if (isServer) return component;
-
   return () => hydrationPromise.then(() => resolveComponent(component));
 }