Unresponsive queries for 15s while database is loading clientside

[VofSwords]

In my application, I want to display a list of posts filtered by tags and each post individually on the corresponding page. But when I try to go to the post page or change the filtering, sqlite3.wasm starts loading, and until it loads, the post page or filtering will not be reflected. Sometimes, this file takes up to 15 seconds to load.
I appreciate that the Сontent team is trying to speed up queries by doing them on the client side, but a 15-second delay after an action is clearly not the result you expect. especially if you really need to load all the files on the client side, not just the ones you've already visited.

Anyway, maybe I'm doing something wrong, and I missed some important part in the documentation. But I still have a few questions that I might want to add to the documentation.

Is it possible to not wait for sqlite3 to load on the client and just make requests to the server until it is fully loaded? Does it make sense to label pages with content as server only? Will the database be loaded every time the page is refreshed? How to invalidate data inside the database if a new article is added? If I use a different database provider, will the queries always go to the server?

I would be very grateful if you could help me to find the answers and it could improve the documentation so that these points become clearer.

[VofSwords]

here is the page that i have problem with

<script setup lang="ts">
definePageMeta({
  layout: "main-menu",
});

const router = useRouter();

const { data: tagsResponse } = await useAsyncData("tags", () =>
  queryCollection("instructions").select("tags").all()
);

const { data: instructionsResponse } = await useAsyncData(
  "instructions",
  () => {
    const tagQuery = router.currentRoute.value.query.tag;
    let query = queryCollection("instructions").select(
      "id",
      "title",
      "path",
      "description",
      "tags",
      "image"
    );

    if (tagQuery && !Array.isArray(tagQuery)) {
      query = query.where("tags", "LIKE", `%${tagQuery}%`);
    }

    return query.all();
  },
  {
    watch: [() => router.currentRoute.value.query.tag],
  }
);

const instructions = computed(() => instructionsResponse.value ?? []);

const tags = computed(() => {
  if (tagsResponse.value === null) return [];
  const tagsSet = new Set<string>();
  for (const instruction of tagsResponse.value) {
    for (const tag of instruction.tags) {
      tagsSet.add(tag);
    }
  }

  return Array.from(tagsSet);
});
</script>

<template>
  <LayoutPageWrapper class="py-6">
    <LayoutContentWrapper>
      <div class="my-5 flex flex-wrap pr-8 gap-1">
        <button
          class="text-xs px-2 py-0.5 rounded-full cursor-pointer"
          :class="
            !router.currentRoute.value.query.tag ? 'bg-selected' : 'bg-card'
          "
          @click="router.push({ query: {} })"
        >
          <span class="pb-px">All</span>
        </button>
        <button
          v-for="tag in tags"
          :key="tag"
          :class="
            router.currentRoute.value.query.tag === tag
              ? 'bg-selected'
              : 'bg-card'
          "
          class="text-xs px-2 py-0.5 rounded-full cursor-pointer"
          @click="router.push({ query: { tag } })"
        >
          <span class="pb-px">{{ tag }}</span>
        </button>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
        <NuxtLink
          v-for="instruction in instructions"
          v-slot="{ navigate }"
          :key="instruction.id"
          :to="instruction.path"
          custom
        >
          <FeatureContentCard
            :title="instruction.title"
            :tags="instruction.tags"
            :image="instruction.image"
            class="cursor-pointer"
            @click="navigate"
          >
            <span>
              {{ instruction.description }}
            </span>
          </FeatureContentCard>
        </NuxtLink>
      </div>
    </LayoutContentWrapper>
  </LayoutPageWrapper>
</template>