I need to reload to show content

[DelvinBa]

I have implemented nuxt content v3, but somehow I need to reload the page once, to show the readme contents on the website. Before it throws the error
SSR is enabled. Would be nice if you have some ideas on what I am making wrong...
Why is that? Here is some code that I use:

<template>
    <div class="min-h-screen bg-background py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto">
            <h1 class="text-3xl sm:text-4xl font-heading font-bold text-primary mb-6 sm:mb-8 text-center sm:text-left">
                Blog
            </h1>

            <!-- List of Blog Posts -->
            <div class="space-y-6 sm:space-y-8">
                <article v-for="post in allPosts ?? []" :key="post._id"
                    class="group relative bg-gradient-to-br from-gradient-start to-gradient-end p-4 sm:p-6 rounded-lg shadow-xl transition-all hover:shadow-2xl">
                    <NuxtLink :to="post.path" class="absolute inset-0 z-10" />

                    <div class="flex flex-col space-y-3 sm:space-y-4">
                        <div class="flex flex-wrap items-center space-x-2 text-secondary text-xs sm:text-sm">
                            <time class="font-body">{{ formatDate(post.date) }}</time>
                            <span class="text-accent">•</span>
                            <span class="font-body">{{ post.author }}</span>
                        </div>

                        <h2 class="text-xl sm:text-2xl font-heading font-bold text-primary">
                            {{ post.title }}
                        </h2>

                        <p class="text-sm sm:text-base text-secondary font-body leading-relaxed">
                            {{ post.description }}
                        </p>

                        <div class="flex flex-wrap gap-2">
                            <span v-for="tag in post.tags" :key="tag"
                                class="px-2 sm:px-3 py-1 text-xs sm:text-sm font-body bg-accent-dark rounded-full text-white transition-colors">
                                {{ tag }}
                            </span>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</template>

<script setup>
const route = useRoute()

const { data: allPosts, error, isFetching } = await useAsyncData(route.path, async () => {
    try {
        const posts = await queryCollection('blog')
            .order('date', 'DESC')
            .select('path', 'title', 'description', 'date', 'author', 'tags')
            .all();
        return posts || []; 
    } catch (err) {
        console.error("🔥 Error at loading the blogs:", err);
        throw new Error("did not load blogs");
    }
}, {
    default: () => [] // IMPORTANT: Prevents Hydration-error at Preview
});

My content.config looks like this:

import { defineContentConfig, defineCollection, z } from "@nuxt/content";
import { asSitemapCollection } from "@nuxtjs/sitemap/content";

export default defineContentConfig({
  collections: {
    blog: defineCollection(
      asSitemapCollection({
        type: "page",
        source: "blog/**/*.md",
        schema: z.object({
          title: z.string(),
          description: z.string(),
          date: z.string(), // This ensures the "date" column exists
          author: z.string(),
          tags: z.array(z.string()),
          image: z.string().optional(),
        }),
      })
    ),
  },
});