Finally (???) fix the hydration issues with a markdown renderer in SSR

components/explorer/PreviewContent.vue

@@ -1,7 +1,7 @@
 <template>
     <HoverPopup @before-show="fetch" :class="[{'is-loaded': fetched}, file?.type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']">
         <template #content>
-            <Suspense>
+            <Suspense suspensible>
                 <div v-if="pending" class="loading w-[550px] h-[450px]"></div>
                 <template v-else-if="!!file">
                     <div v-if="file.type === 'Markdown'" class="p-6 ms-6">
@@ -22,7 +22,7 @@
                 </div>
             </Suspense>
         </template>
-        <slot></slot>
+        <template #default><slot name="default"></slot></template>
     </HoverPopup>
 </template>
 

components/prose/ProseA.vue

@@ -1,13 +1,13 @@
 <template>
-    <Suspense>
-        <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0] && status !== 'pending'"
+    <Suspense suspensible>
+        <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
         :to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
             <PreviewContent :project="project" :path="data[0].path" :anchor="hash">
-                <div class="inline-flex items-center">
+                <template #default>
                     <slot v-bind="$attrs"></slot>
                     <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
                         :icon="`icons/link-${data[0].type.toLowerCase()}`" />
-                </div>
+                </template>
             </PreviewContent>
         </NuxtLink>
         <NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
@@ -33,32 +33,18 @@ const props = defineProps({
     }
 });
 
-const nuxt = useNuxtApp();
 const route = useRoute();
 const { hash, pathname, protocol } = parseURL(props.href);
 const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-const key = computed(() => `file:${project.value}:%${pathname}`);
-
-const { data, status, execute } = await useFetch(`/api/project/${project.value}/file`, {
-    method: 'GET',
-    query: {
-        search: `%${pathname}`
-    },
-    transform: (data) => data?.map(e => ({ path: e.path, type: e.type })),
-    key: key.value,
-    ignoreResponseError: true,
-    immediate: false,
-    server: false,
-    dedupe: 'defer'
-});
+const data = ref();
 
 if(!!pathname && !protocol)
 {
-    await execute();
-    if(data.value === null && status.value === 'idle')
-    {
-        data.value = nuxt.payload.data[key.value] ?? nuxt.static.data[key.value];
-        status.value = 'success';
-    }
+    data.value = await $fetch(`/api/project/${project.value}/file`, {
+        query: {
+            search: `%${pathname}`
+        },
+        ignoreResponseError: true,
+    });
 }
 </script>