diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 158f0cade..1d81f70eb 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(() => [ @@ -259,18 +267,19 @@ 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 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) + // 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. const serverRenderedHtml = shallowRef( - isHydratingWithServerContent.value + hasServerContentOnly.value ? (document.getElementById('package-article')?.innerHTML ?? null) : null, ) @@ -279,7 +288,6 @@ if (isSpaFallback.value || isHydratingWithServerContent.value) { nuxtApp.hooks.hookOnce('app:suspense:resolve', () => { isSpaFallback.value = false isHydratingWithServerContent.value = false - serverRenderedHtml.value = null }) } @@ -733,27 +741,26 @@ 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-->
-
+