Using new useStoryblokRichText composable causes (large) warnings server-side and hydration-error client-side

[codeflorist]

Describe the issue you're facing

I'm trying to use the useStoryblokRichText composable of the new richtext-functionality with Nuxt.

At first i had the problem, that the render function generated a VNode instead of the (documented) html. I raised an issue at the storyblok-vue repo for this (storyblok/storyblok-vue#745) regarding this. So i used the VNode directly instead of v-html like this:

<script setup>
import { useStoryblokRichText, BlockTypes, MarkTypes } from '@storyblok/vue';
const story = await useAsyncStoryblok(
  'home',
  { version: 'draft' },
  { customParent: 'https://app.storyblok.com' }
);

const resolvers = {
  [MarkTypes.LINK]: (node) => {
    return h(
      'a',
      {
        href: node.attrs?.href,
        target: node.attrs?.target,
      },
      node.text
    );
  },
};

const { render: richTextRender } = useStoryblokRichText({
  resolvers,
});

const RichTextVNode = richTextRender(story.value.content.richtext);
</script>

<template>
  <RichTextVNode />
</template>

But this does not seem to play well with Nuxt (and possibly SSR/SSG in general).

Server-side it throws several vue-warnings (which are pretty large due to the complete VNode being output too):

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.

Client side, the rendered content is correctly displayed, but a hydration mismatch warnind is thrown, since the server doesn't seem to render node at all (probably due to the warnings):

- rendered on server: <!---->  
- expected on client: div 

Nothing getting rendered on server of course has the problem, that the content is only displayed on client once hydration is done, which is problematic (also regarding SEO).

Reproduction

https://stackblitz.com/edit/nuxt-3-quickstart-demo-norkmc?file=pages%2Findex.vue

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct