Extend experiments with loading client-side

Result: they are practically the same! Very good!!! tRPC still has better typing on Request from Client-side.

pages/index.vue

@@ -10,6 +10,24 @@ const { data: otherHello } = await useFetch('/api/test/HELLO', {
     world: 'MONDO'
   }
 });
+
+const clientSide = ref<{
+  trpcData: string,
+  fetchData: string,
+} | null>(null);
+
+async function loadNewData() {
+  const [{ data: a1 }, { data: b1 }] = await Promise.all([
+    $trpc.hello.useQuery({ text: 'client' }),
+    useFetch('/api/test/HELLO', {
+      method: 'post',
+      body: {
+        world: 'MONDO'
+      }
+    })
+  ]);
+  clientSide.value = { trpcData: a1.value?.greeting ?? 'no', fetchData: b1.value?.risultato ?? 'no2' };
+}
 </script>
 
 <template>
@@ -19,6 +37,13 @@ const { data: otherHello } = await useFetch('/api/test/HELLO', {
       <p>RPC Client output: {{ hello }}</p>
       <p>Nuxt API output: {{ otherHello?.risultato }}</p>
     </div>
+    <div>
+      <button @click="loadNewData">Carica ClientSide</button>
+      <div v-if="clientSide">
+        <p>{{ clientSide.trpcData }}</p>
+        <p>{{ clientSide.fetchData }}</p>
+      </div>
+    </div>
   </div>
 </template>