diff --git a/src/LazyHydrate.js b/src/LazyHydrate.js index a3ca4f9..54df35a 100644 --- a/src/LazyHydrate.js +++ b/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(); }, }, }, diff --git a/src/utils/disabled.js b/src/utils/disabled.js new file mode 100644 index 0000000..bbd3784 --- /dev/null +++ b/src/utils/disabled.js @@ -0,0 +1,16 @@ +const isServer = typeof window === `undefined`; +let isPageLodaded = false; + +if (!isServer) { + // load event fires, when document with all scripts is loaded, + // so after hydration process is finished + window.addEventListener(`load`, () => { + isPageLodaded = 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 || isPageLodaded; +} diff --git a/src/utils/hydration-blocker.js b/src/utils/hydration-blocker.js index e1ff3c9..58efc50 100644 --- a/src/utils/hydration-blocker.js +++ b/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(); diff --git a/src/utils/nonce.js b/src/utils/nonce.js index d873b16..5150d00 100644 --- a/src/utils/nonce.js +++ b/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)); }