Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-16 21:58:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support lazy hydration on SSR

Browse Source
This commit is contained in:
Michael Brevard 2024-04-11 00:02:48 +03:00 committed by GitHub
parent b4c4d47721
commit 2375650c36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/nuxt/src/components/runtime/client-delayed-component.ts
View File

@ -1,13 +1,20 @@
import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
import { defineComponent, h, onBeforeUnmount, onMounted, ref, getCurrentInstance, createStaticVNode } from 'vue'
import type { Component, Ref } from 'vue'
// import ClientOnly from '#app/components/client-only'
import { useObserver } from '#app/utils'
import { getFragmentHTML } from '#app/components/utils'
/* @__NO_SIDE_EFFECTS__ */
export const createLazyIOClientPage = (componentLoader: Component) => {
return defineComponent({
inheritAttrs: false,
setup (_, { attrs }) {
const nuxt = useNuxtApp()
const instance = getCurrentInstance()!
let vnode = null
if (import.meta.client && nuxt.isHydrating) {
vnode = createStaticVNode(getFragmentHTML(instance.vnode.el), 1)
}
const isIntersecting = ref(false)
const el: Ref<Element | null> = ref(null)
let unobserve: (() => void) | null = null
@ -24,7 +31,7 @@ export const createLazyIOClientPage = (componentLoader: Component) => {
unobserve = null
})
return () => h('div', { ref: el }, [
isIntersecting.value ? h(componentLoader, attrs) : null,
isIntersecting.value ? h(componentLoader, attrs) : vnode,
])
},
})
@ -35,6 +42,12 @@ export const createLazyNetworkClientPage = (componentLoader: Component) => {
return defineComponent({
inheritAttrs: false,
setup (_, { attrs }) {
const nuxt = useNuxtApp()
const instance = getCurrentInstance()!
let vnode = null
if (import.meta.client && nuxt.isHydrating) {
vnode = createStaticVNode(getFragmentHTML(instance.vnode.el), 1)
}
const isIdle = ref(false)
let idleHandle: number | null = null
onMounted(() => {
@ -50,7 +63,7 @@ export const createLazyNetworkClientPage = (componentLoader: Component) => {
idleHandle = null
}
})
return () => isIdle.value ? h(componentLoader, attrs) : null
return () => isIdle.value ? h(componentLoader, attrs) : vnode
},
})
}