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

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>