`<ServerOnly>` component (to render markup only once) about nuxt

[dsvgl]

This already exists: https://nuxt.com/docs/guide/directory-structure/components#server-components

[septatrix]

This already exists: https://nuxt.com/docs/guide/directory-structure/components#server-components

Using server components would mean that for every slightly different footer I would need a new component. The beauty of the <ClientOnly> component is that it simply accepts markup in its slot instead of requiring a new component for every area where it is used.

[dsvgl]

Ah, I see. We use https://github.com/freddy38510/vue3-lazy-hydration for such things. So you can wrap your time output in template with:

<template>
  <LazyHydrationWrapper>
    {{ new Date() }}
  </LazyHydrationWrapper>
</template>

Having no lazy-hydration specific prop on < LazyHydrationWrapper> means it will never hydrate on client side.

There is also really nice nuxt-module to wrap vue3-lazy-hydration: https://github.com/Baroshem/nuxt-lazy-hydrate.
With this, you'd use <NuxtLazyHydrate> instead of <LazyHydrationWrapper>.

There is an open issue to bake this into nuxt. Hopefully it will land some day: #24242