Nuxt3+microcms+netlifyで作成したWEBサイトで401エラー

実現したいこと

401エラー、Hydration children mismatchを解消したい

発生している問題・分からないこと

下記の問題が発生。

・本番環境にて401エラー（microcmsで作成したブログ部分が表示しない。.envの設定はnetlify側wにも追加済）
・ローカル環境にてhydration children mismatch発生（出力データや記事の表示件数にズレも見当たらずどこが引っかかっているのか見当がつきません、、、）

microcmsの設定はhttps://blog.microcms.io/nuxt3-jamstack-blog/ を参照しました。

エラーメッセージ

error
1本番環境の場合(netlify)
2Failed to load resource: the server responded with a status of 401 ()
3
4ローカルの場合
5chunk-UKZM2QLG.js?v=6ab75479:1502 [Vue warn]: Hydration children mismatch on 
6<ul class="bl_blogList" data-v-inspector="components/bloglist.vue:3:5">
7Server rendered element contains more child nodes than client vdom.

該当のソースコード

blogs.vue
1<template>
2  <div>
3    <section class="">
4      		<div class="container">
5        <h1 class="el_head">投稿一覧</h1>
6        <ul class="bl_blogList">
7        <li v-for="blog in data?.contents" :key="blog.id">
8          <NuxtLink :to="`/${blog.id}`">
9            <img :src="blog.eyecatch?.url || '/noimg.jpg'" :width="blog.eyecatch?.width" :height="blog.eyecatch?.height" alt="" />
10            <h4>{{ blog.title }}</h4>
11            <span class="el_blogLabel">{{ blog.category?.name }}</span>
12            <span class="el_blogData">{{ dataFormat(blog.publishedAt ?? blog.createdAt) }}</span>
13          </NuxtLink>
14        </li>
15      </ul>
16      </div>
17    </section>
18    <Footer />
19  </div>
20</template>
21
22<script setup lang="ts">
23import type { Blog } from "~~/types/blog";
24import { dataFormat } from '~~/utils/dataFormat';
25const { data } = await useMicroCMSGetList<Blog>({
26  endpoint: "blogs",
27});
28</script>

blog.ts
1import type { MicroCMSImage, MicroCMSListContent } from "microcms-js-sdk";
2import type { Category } from "./category";
3
4export type Blog = {
5  title?: string;
6  content?: string;
7  eyecatch?: MicroCMSImage;
8  category: (MicroCMSListContent & Category) | null;
9};

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ローカル環境でのHydration children mismatch解消のため、ネット検索＋chatgptなどで解決を図るもズレが見当たらずどこを直してよいかわからない。
本番環境に移したら解決するのかと思い、github連携からnetlifyにデプロイ。
サイトは問題なく表示するが、ブログに関する部分が401エラーで表示しない。という状況です。
根本的に見る場所が間違っているのでしょうか？