Reactでmicrocmsを利用する方法について

Question

前提

現在Reactを用いたポートフォリオ x ブログを作ろうとしているところです．
このブログの部分でmicroCMSというものを用いて静的サイトでブログの表示を行いたいと思っています．
しかしながらうまく行かない + React x microCMSの情報が少ないため混乱しています．またNext.jsは使いたくありません．

実現したいこと

microcmsから async, await を用いてAPIリクエストを行い{blog}に値を入れて，その値をmapを用いて一覧表示させたいと考えています．

発生している問題・エラーメッセージ

しかしながらReactの画面は真っ白のままで何も表示されないため困っています．
App.jsxのコードは次の通りです．
自分での下のexport const ...の部分がおそらく間違っているのはわかるのですが，調べてもどのように直したら良いのかわからず3日ほど経ってしまったため質問させていただきました．ご教授お願いします．

import React from 'react';
import { client } from "./libs/client";

const App = ({blog}) => {
  return (
    <div>
      <ul>
        {blog.map((blog) => (
          <li key={blog.id}>
            <img className="img-1" src={blog.image.url} alt=""/>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

export const getStaticProps = async () => {
  const data = await client.get({ endpoint: "blog" });
  return {
    props: {
      blog: data.contents,
    },
  };
};

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: process.env.xxxxxxxxxxx,
  apiKey: process.env.xxxxxxxxx,
});

参考にしたサイト

Next.jsですがこちらを参考にしました
https://blog.microcms.io/microcms-next-jamstack-blog/

Comments

[maisumakun]

コンソールにエラーが出たりはしていませんか？

[yuki_my]

特にでてないです．
問題点がわかったのですが，Reactのロード時にクライアントにAPIにリクエストする関数みたいのが動いていないみたいです．
そのためblogに何も渡されず何も表示されないみたいです．
そこでAppのreturn前に関数を実行することでデータを取ろうと思ったのですが，これだとblogに格納されないため使えない感じでした．
ロード時に一回実行して，propsに格納する方法などってありますか？

Answer 1

またNext.jsは使いたくありません．

参考にされたサイトには、サーバサイドでの実行部分が含まれます。Next.jsを使わないのであれば、それ以外の何かしらの形で（自前で）サーバサイドを実装する必要があります。