Hydration mismatch between server and client

[mitjans]

I get a hydratoin mismatch when I render some documents from Firestore. I'm not used to SSR and I think I might be doing something wrong since there seems to be some SSR configuration for Vuefire that I'm not using.

Environment:

• I'm using Nuxt 3

I have the following component:

Vue component

<template>
  <div class="w-full h-full flex flex-col gap-8 text-white">
    <div id="selected" class="flex justify-around gap-4">
      <span v-if="selected">{{ selected.id }}: {{ selected.content }}</span>
      <button :disabled="selected === undefined" @click="deleteDocument()">
        Delete
      </button>
    </div>

    <hr />

    <div id="documents" class="flex flex-col gap-4">
      <button @click="createDocument()">New</button>

      <button
        v-for="document of documents"
        :key="document.id"
        @click="selected = document"
      >
        {{ document.id }}: {{ document.content }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User } from '@firebase/auth';
import { addDoc, collection, deleteDoc, doc } from '@firebase/firestore';

interface Document {
  readonly id: string;
  content: string;
}

const user = (await getCurrentUser()) as User;
const firestore = useFirestore();
const documentsCollection = collection(firestore, `/users/${user.uid}/docs`);
const documents = useCollection<Document>(documentsCollection);
const selected = ref<Document>();

const createDocument = () => {
  addDoc(documentsCollection, {
    content: '',
  });
};

const deleteDocument = async () => {
  if (selected.value === undefined) return;

  await deleteDoc(
    doc(firestore, `/users/${user.uid}/docs/${selected.value.id}`)
  );

  selected.value = undefined;
};
</script>

I can start adding new documents to Firestore, which works like a charm. But when I delete a document and refresh the page, that's when the mismatch happens. It seems as if the server is caching the results somehow. I've tried using some of these options since they are related to SSR (although I must admit I don't actually know what they do):

SSR options

/**
 * Use the `target` ref instead of creating one.
 */
target?: Ref<unknown>;
/**
 * Optional key to handle SSR hydration. **Necessary for Queries** or when the same source is used in multiple places
 * with different converters.
 */
ssrKey?: string;
/**
 * If true, the data will be reset when the data source is unbound. Pass a function to specify a custom reset value.
 */
reset?: ResetOption;
/**
 * If true, wait until the data is loaded before setting the data for the first time. For Firestore, this includes
 * nested refs. This is only useful for lists and collections. Objects and documents do not need this.
 */
wait?: boolean;
/**
 * Should the data be fetched once rather than subscribing to changes.
 * @experimental Still under development
 */
once?: boolean;

How should I handle this situation?
Thanks!

---

I've managed to somehow overcome this problem if I wrap the component in <ClientOnly>, although I don't know if that's ideal

[mitjans]

The problem was that I had document data shown in the same html tag (which I think it's weird).

<button
  v-for="document of documents"
  :key="document.id"
  @click="selected = document"
>
  {{ document.id }}: {{ document.content }}
</button>

I solved it by showing each document data in its separate html tag:

<button
  v-for="document of documents"
  :key="document.id"
  @click="selected = document"
>
  <span>{{ document.id }}<span>
  <span>{{ document.content }}</span>
</button>