From 680bebfbff46e716a420c270009a2dae48af2b28 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 17:35:57 +0000 Subject: [PATCH 01/23] chore: check initial data on package page --- app/pages/package/[[org]]/[name].vue | 47 ++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 158f0cade..8b863d29d 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -266,6 +266,53 @@ const isSpaFallback = shallowRef(hasEmptyPayload && !nuxtApp.payload.path) const isHydratingWithServerContent = shallowRef( hasEmptyPayload && nuxtApp.payload.path === route.path, ) + +watch(isSpaFallback, value => { + console.log('isSpaFallback', value) +}) +watch(isHydratingWithServerContent, value => { + console.log('isHydratingWithServerContent', value) +}) +watch( + [ + () => hasEmptyPayload, + () => isSpaFallback.value, + () => isHydratingWithServerContent.value, + () => status.value, + ], + ([hasEmptyPayloadArg, isSpaFallbackArg, isHydratingWithServerContentArg, statusArg]) => { + console.log( + 'main bunch', + hasEmptyPayloadArg, + isSpaFallbackArg, + isHydratingWithServerContentArg, + statusArg, + ) + }, +) +watch( + [ + () => import.meta.client, + () => nuxtApp.isHydrating, + () => nuxtApp.payload.serverRendered, + () => Object.keys(nuxtApp.payload.data ?? {}).length, + ], + ([importMetaClientArg, isHydratingArg, serverRenderedArg, dataLengthArg]) => { + console.log( + 'additional bunch', + importMetaClientArg, + isHydratingArg, + serverRenderedArg, + dataLengthArg, + ) + }, +) +watch( + () => nuxtApp.payload.data, + data => { + console.log('nuxtApp.payload.data', data) + }, +) // When we have server-rendered content but no payload data, capture the server // DOM before Vue's hydration replaces it. This lets us show the server-rendered // HTML as a static snapshot while data refetches, avoiding any visual flash. From 84d223432469dae7eaeac5a0f314cdfed34e6a7b Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 17:51:03 +0000 Subject: [PATCH 02/23] chore: check more details --- app/pages/package/[[org]]/[name].vue | 43 +++++++++++----------------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 8b863d29d..31d542ab3 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -267,44 +267,34 @@ const isHydratingWithServerContent = shallowRef( hasEmptyPayload && nuxtApp.payload.path === route.path, ) -watch(isSpaFallback, value => { - console.log('isSpaFallback', value) -}) -watch(isHydratingWithServerContent, value => { - console.log('isHydratingWithServerContent', value) -}) watch( [ () => hasEmptyPayload, () => isSpaFallback.value, () => isHydratingWithServerContent.value, () => status.value, + () => Object.keys(nuxtApp.payload.data ?? {}).length, + () => resolvedVersion.value, + () => requestedVersion.value, ], - ([hasEmptyPayloadArg, isSpaFallbackArg, isHydratingWithServerContentArg, statusArg]) => { - console.log( - 'main bunch', + ([ + hasEmptyPayloadArg, + isSpaFallbackArg, + isHydratingWithServerContentArg, + statusArg, + dataLengthArg, + resolvedVersionArg, + requestedVersionArg, + ]) => { + console.log('main bunch', { hasEmptyPayloadArg, isSpaFallbackArg, isHydratingWithServerContentArg, statusArg, - ) - }, -) -watch( - [ - () => import.meta.client, - () => nuxtApp.isHydrating, - () => nuxtApp.payload.serverRendered, - () => Object.keys(nuxtApp.payload.data ?? {}).length, - ], - ([importMetaClientArg, isHydratingArg, serverRenderedArg, dataLengthArg]) => { - console.log( - 'additional bunch', - importMetaClientArg, - isHydratingArg, - serverRenderedArg, dataLengthArg, - ) + resolvedVersionArg, + requestedVersionArg, + }) }, ) watch( @@ -312,6 +302,7 @@ watch( data => { console.log('nuxtApp.payload.data', data) }, + { immediate: true }, ) // When we have server-rendered content but no payload data, capture the server // DOM before Vue's hydration replaces it. This lets us show the server-rendered From 8c7061fb78a00d918380cbac65d58fcc4cd92b5f Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 17:59:09 +0000 Subject: [PATCH 03/23] chore: check more details --- app/pages/package/[[org]]/[name].vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 31d542ab3..0794fa3d9 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -273,6 +273,7 @@ watch( () => isSpaFallback.value, () => isHydratingWithServerContent.value, () => status.value, + () => pkg.value, () => Object.keys(nuxtApp.payload.data ?? {}).length, () => resolvedVersion.value, () => requestedVersion.value, @@ -282,6 +283,7 @@ watch( isSpaFallbackArg, isHydratingWithServerContentArg, statusArg, + pkgArg, dataLengthArg, resolvedVersionArg, requestedVersionArg, @@ -291,6 +293,7 @@ watch( isSpaFallbackArg, isHydratingWithServerContentArg, statusArg, + pkgArg, dataLengthArg, resolvedVersionArg, requestedVersionArg, @@ -300,7 +303,7 @@ watch( watch( () => nuxtApp.payload.data, data => { - console.log('nuxtApp.payload.data', data) + console.log('nuxtApp.payload.data', data, Object.keys(data ?? {})) }, { immediate: true }, ) From d67ac0c1b22c9a5f5f5dec58f77ae8284756ec43 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 18:00:14 +0000 Subject: [PATCH 04/23] chore: check client hook --- app/plugins/fix.client.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/plugins/fix.client.ts b/app/plugins/fix.client.ts index 9433bbde0..4dcb77625 100644 --- a/app/plugins/fix.client.ts +++ b/app/plugins/fix.client.ts @@ -14,6 +14,7 @@ export default defineNuxtPlugin({ !Object.keys(nuxtApp.payload.data).length ) { nuxtApp.hooks.hookOnce('app:suspense:resolve', () => { + console.log('refreshing nuxt data') refreshNuxtData() }) } From efcfb46ef014f7967f53b763068a8531f322d6ca Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 18:12:21 +0000 Subject: [PATCH 05/23] chore: check package hook --- app/composables/npm/usePackage.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/composables/npm/usePackage.ts b/app/composables/npm/usePackage.ts index 96bab1592..47b23005f 100644 --- a/app/composables/npm/usePackage.ts +++ b/app/composables/npm/usePackage.ts @@ -156,6 +156,7 @@ export function usePackage( const asyncData = useLazyAsyncData( () => `package:${toValue(name)}:${toValue(requestedVersion) ?? ''}`, async ({ $npmRegistry }, { signal }) => { + console.log('fetching package') const encodedName = encodePackageName(toValue(name)) const { data: r, isStale } = await $npmRegistry(`/${encodedName}`, { signal, @@ -168,6 +169,7 @@ export function usePackage( if (import.meta.client && asyncData.data.value?.isStale) { onMounted(() => { + console.log('refreshing package on mount') asyncData.refresh() }) } From f49069c516307974804f527284dec3a949ded0bd Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 18:22:53 +0000 Subject: [PATCH 06/23] fix: compute version outside of package hook deps --- app/pages/package/[[org]]/[name].vue | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 0794fa3d9..85465c68e 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -241,11 +241,9 @@ watch( { immediate: true }, ) -const { - data: pkg, - status, - error, -} = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value) +const computedVersion = computed(() => resolvedVersion.value ?? requestedVersion.value) + +const { data: pkg, status, error } = usePackage(packageName, () => computedVersion.value) // Detect two hydration scenarios where the external _payload.json is missing: // From b88a97c15e34f450cc0d298f235300e45e7acd53 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 18:32:27 +0000 Subject: [PATCH 07/23] fix: compute version outside of package hook deps with stable ref --- app/pages/package/[[org]]/[name].vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 85465c68e..70a0531d5 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -241,9 +241,18 @@ watch( { immediate: true }, ) -const computedVersion = computed(() => resolvedVersion.value ?? requestedVersion.value) +const stableVersion = ref() +watch( + () => resolvedVersion.value ?? requestedVersion.value, + (versionArg, versionPrevious) => { + if (versionArg !== versionPrevious) { + stableVersion.value = versionArg + } + }, + { immediate: true }, +) -const { data: pkg, status, error } = usePackage(packageName, () => computedVersion.value) +const { data: pkg, status, error } = usePackage(packageName, () => stableVersion.value) // Detect two hydration scenarios where the external _payload.json is missing: // From 573221cd2a73f56827cbe70e3cd990d2a2d2509a Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 18:40:55 +0000 Subject: [PATCH 08/23] fix: check data on refresh --- app/plugins/fix.client.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/plugins/fix.client.ts b/app/plugins/fix.client.ts index 4dcb77625..2bf1d1d93 100644 --- a/app/plugins/fix.client.ts +++ b/app/plugins/fix.client.ts @@ -14,7 +14,11 @@ export default defineNuxtPlugin({ !Object.keys(nuxtApp.payload.data).length ) { nuxtApp.hooks.hookOnce('app:suspense:resolve', () => { - console.log('refreshing nuxt data') + console.log( + 'refreshing nuxt data', + nuxtApp.payload.data, + Object.keys(nuxtApp.payload.data ?? {}), + ) refreshNuxtData() }) } From 0451045598444b8555b9191df03d6776cb58ca40 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 18:50:17 +0000 Subject: [PATCH 09/23] fix: update skeleton condition --- app/composables/npm/usePackage.ts | 1 - app/pages/package/[[org]]/[name].vue | 20 +++++++------------- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/app/composables/npm/usePackage.ts b/app/composables/npm/usePackage.ts index 47b23005f..e268b2a31 100644 --- a/app/composables/npm/usePackage.ts +++ b/app/composables/npm/usePackage.ts @@ -169,7 +169,6 @@ export function usePackage( if (import.meta.client && asyncData.data.value?.isStale) { onMounted(() => { - console.log('refreshing package on mount') asyncData.refresh() }) } diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 70a0531d5..f54cc5bd8 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -241,18 +241,11 @@ watch( { immediate: true }, ) -const stableVersion = ref() -watch( - () => resolvedVersion.value ?? requestedVersion.value, - (versionArg, versionPrevious) => { - if (versionArg !== versionPrevious) { - stableVersion.value = versionArg - } - }, - { immediate: true }, -) - -const { data: pkg, status, error } = usePackage(packageName, () => stableVersion.value) +const { + data: pkg, + status, + error, +} = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value) // Detect two hydration scenarios where the external _payload.json is missing: // @@ -782,7 +775,8 @@ const showSkeleton = shallowRef(false) From b6992867de7ebd7a558fb8dfaed416f7efd65209 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 18:58:16 +0000 Subject: [PATCH 10/23] fix: update article condition --- app/pages/package/[[org]]/[name].vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index f54cc5bd8..f701e0af5 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -791,11 +791,7 @@ const showSkeleton = shallowRef(false) v-html="serverRenderedHtml" /> -
+
Date: Wed, 25 Feb 2026 19:19:07 +0000 Subject: [PATCH 11/23] fix: update server rendered package condition --- app/pages/package/[[org]]/[name].vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index f701e0af5..23f6d4b6f 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -785,13 +785,13 @@ const showSkeleton = shallowRef(false) v-html is safe here: the content originates from the server's own SSR output, captured from the DOM before hydration — it is not user-controlled input. -->
-
+
Date: Wed, 25 Feb 2026 19:25:13 +0000 Subject: [PATCH 12/23] fix: update skeleton condition on package page --- app/pages/package/[[org]]/[name].vue | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 23f6d4b6f..6b09f4984 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -774,10 +774,7 @@ const showSkeleton = shallowRef(false)
Date: Wed, 25 Feb 2026 19:46:30 +0000 Subject: [PATCH 15/23] fix: update initial state on package page --- app/pages/package/[[org]]/[name].vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 7a87eb1c8..cdb16ba17 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -263,6 +263,7 @@ const hasEmptyPayload = nuxtApp.payload.serverRendered && !Object.keys(nuxtApp.payload.data ?? {}).length const isSpaFallback = shallowRef(hasEmptyPayload && !nuxtApp.payload.path) +const hasServerContentOnly = shallowRef(hasEmptyPayload && nuxtApp.payload.path === route.path) const isHydratingWithServerContent = shallowRef( hasEmptyPayload && nuxtApp.payload.path === route.path, ) @@ -311,7 +312,7 @@ watch( // DOM before Vue's hydration replaces it. This lets us show the server-rendered // HTML as a static snapshot while data refetches, avoiding any visual flash. const serverRenderedHtml = shallowRef( - isHydratingWithServerContent.value + hasServerContentOnly.value ? (document.getElementById('package-article')?.innerHTML ?? null) : null, ) @@ -773,7 +774,7 @@ const showSkeleton = shallowRef(false)
Date: Wed, 25 Feb 2026 19:52:05 +0000 Subject: [PATCH 16/23] fix: update initial state on package page --- app/pages/package/[[org]]/[name].vue | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index cdb16ba17..7d5d3eaeb 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -259,14 +259,13 @@ const nuxtApp = useNuxtApp() const route = useRoute() const hasEmptyPayload = import.meta.client && - nuxtApp.isHydrating && nuxtApp.payload.serverRendered && !Object.keys(nuxtApp.payload.data ?? {}).length -const isSpaFallback = shallowRef(hasEmptyPayload && !nuxtApp.payload.path) -const hasServerContentOnly = shallowRef(hasEmptyPayload && nuxtApp.payload.path === route.path) +const isSpaFallback = shallowRef(nuxtApp.isHydrating && hasEmptyPayload && !nuxtApp.payload.path) const isHydratingWithServerContent = shallowRef( - hasEmptyPayload && nuxtApp.payload.path === route.path, + nuxtApp.isHydrating && hasEmptyPayload && nuxtApp.payload.path === route.path, ) +const hasServerContentOnly = shallowRef(hasEmptyPayload && nuxtApp.payload.path === route.path) watch( [ From 373f48603e671ce4f1ecc8de38b181068aa56952 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 19:58:05 +0000 Subject: [PATCH 17/23] fix: check server content only var --- app/pages/package/[[org]]/[name].vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 7d5d3eaeb..412dae1a8 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -270,6 +270,7 @@ const hasServerContentOnly = shallowRef(hasEmptyPayload && nuxtApp.payload.path watch( [ () => hasEmptyPayload, + () => hasServerContentOnly.value, () => isSpaFallback.value, () => isHydratingWithServerContent.value, () => status.value, @@ -280,6 +281,7 @@ watch( ], ([ hasEmptyPayloadArg, + hasServerContentOnlyArg, isSpaFallbackArg, isHydratingWithServerContentArg, statusArg, @@ -290,6 +292,7 @@ watch( ]) => { console.log('main bunch', { hasEmptyPayloadArg, + hasServerContentOnlyArg, isSpaFallbackArg, isHydratingWithServerContentArg, statusArg, From 54b3e09fba7a089adacba948cd88d91eb6ef5191 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 25 Feb 2026 20:08:12 +0000 Subject: [PATCH 18/23] fix: wait readme data as well --- app/pages/package/[[org]]/[name].vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 412dae1a8..788fe1cfc 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -784,7 +784,7 @@ const showSkeleton = shallowRef(false) v-html is safe here: the content originates from the server's own SSR output, captured from the DOM before hydration — it is not user-controlled input. -->
Date: Wed, 25 Feb 2026 20:26:35 +0000 Subject: [PATCH 19/23] fix: check readme data --- app/pages/package/[[org]]/[name].vue | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 788fe1cfc..1e6ca6ade 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -275,6 +275,7 @@ watch( () => isHydratingWithServerContent.value, () => status.value, () => pkg.value, + () => readmeData.value, () => Object.keys(nuxtApp.payload.data ?? {}).length, () => resolvedVersion.value, () => requestedVersion.value, @@ -286,6 +287,7 @@ watch( isHydratingWithServerContentArg, statusArg, pkgArg, + readmeDataArg, dataLengthArg, resolvedVersionArg, requestedVersionArg, @@ -297,6 +299,7 @@ watch( isHydratingWithServerContentArg, statusArg, pkgArg, + readmeDataArg, dataLengthArg, resolvedVersionArg, requestedVersionArg, @@ -784,7 +787,10 @@ const showSkeleton = shallowRef(false) v-html is safe here: the content originates from the server's own SSR output, captured from the DOM before hydration — it is not user-controlled input. -->
Date: Wed, 25 Feb 2026 20:34:02 +0000 Subject: [PATCH 20/23] fix: wait for readme loading --- app/pages/package/[[org]]/[name].vue | 12 ++++++++++-- shared/types/readme.ts | 2 ++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 1e6ca6ade..90345af86 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -106,7 +106,15 @@ const { data: readmeData } = useLazyFetch( const version = requestedVersion.value return version ? `${base}/v/${version}` : base }, - { default: () => ({ html: '', mdExists: false, playgroundLinks: [], toc: [] }) }, + { + default: () => ({ + html: '', + mdExists: false, + playgroundLinks: [], + toc: [], + defaultValue: true, + }), + }, ) const playgroundLinks = computed(() => [ @@ -789,7 +797,7 @@ const showSkeleton = shallowRef(false)
Date: Wed, 25 Feb 2026 20:37:38 +0000 Subject: [PATCH 21/23] fix: wait for readme loading --- app/pages/package/[[org]]/[name].vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 90345af86..9edcc6a13 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -797,7 +797,7 @@ const showSkeleton = shallowRef(false)
Date: Wed, 25 Feb 2026 20:48:44 +0000 Subject: [PATCH 22/23] fix: polish ssr result preview for scenario 2 --- app/composables/npm/usePackage.ts | 1 - app/pages/package/[[org]]/[name].vue | 50 ++-------------------------- app/plugins/fix.client.ts | 5 --- 3 files changed, 3 insertions(+), 53 deletions(-) diff --git a/app/composables/npm/usePackage.ts b/app/composables/npm/usePackage.ts index e268b2a31..96bab1592 100644 --- a/app/composables/npm/usePackage.ts +++ b/app/composables/npm/usePackage.ts @@ -156,7 +156,6 @@ export function usePackage( const asyncData = useLazyAsyncData( () => `package:${toValue(name)}:${toValue(requestedVersion) ?? ''}`, async ({ $npmRegistry }, { signal }) => { - console.log('fetching package') const encodedName = encodePackageName(toValue(name)) const { data: r, isStale } = await $npmRegistry(`/${encodedName}`, { signal, diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 9edcc6a13..1d81f70eb 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -275,52 +275,6 @@ const isHydratingWithServerContent = shallowRef( ) const hasServerContentOnly = shallowRef(hasEmptyPayload && nuxtApp.payload.path === route.path) -watch( - [ - () => hasEmptyPayload, - () => hasServerContentOnly.value, - () => isSpaFallback.value, - () => isHydratingWithServerContent.value, - () => status.value, - () => pkg.value, - () => readmeData.value, - () => Object.keys(nuxtApp.payload.data ?? {}).length, - () => resolvedVersion.value, - () => requestedVersion.value, - ], - ([ - hasEmptyPayloadArg, - hasServerContentOnlyArg, - isSpaFallbackArg, - isHydratingWithServerContentArg, - statusArg, - pkgArg, - readmeDataArg, - dataLengthArg, - resolvedVersionArg, - requestedVersionArg, - ]) => { - console.log('main bunch', { - hasEmptyPayloadArg, - hasServerContentOnlyArg, - isSpaFallbackArg, - isHydratingWithServerContentArg, - statusArg, - pkgArg, - readmeDataArg, - dataLengthArg, - resolvedVersionArg, - requestedVersionArg, - }) - }, -) -watch( - () => nuxtApp.payload.data, - data => { - console.log('nuxtApp.payload.data', data, Object.keys(data ?? {})) - }, - { immediate: true }, -) // When we have server-rendered content but no payload data, capture the server // DOM before Vue's hydration replaces it. This lets us show the server-rendered // HTML as a static snapshot while data refetches, avoiding any visual flash. @@ -793,7 +747,9 @@ const showSkeleton = shallowRef(false) + captured from the DOM before hydration — it is not user-controlled input. + We also show SSR output until critical data is loaded, so that after rendering dynamic + content, the user receives the same result as he received from the server-->