server - getserversideprops axios return Request はステータス コード 404 で失敗しましたが、useffect では機能します

Question

私のプロジェクトで axios に大きな問題があります。でデータを取得するために axios を使用しましたgetServerSideProps。useEffectしかし、「ステータスコード404でリクエストが失敗しました」と表示されていますか?同時に、APIからデータを取得する場所でaxiosも使用しました。

export async function getServerSideProps() {
  try {
    const ApiUrl = apiBaseUrl + "/api/my-url";
    const homeData = await axios
      .get(ApiUrl)
      .then((response) => {
        return response.data;
      })
      .catch((error) => {
        return error.message;
      });

    return {
      props: {
        homeData: homeData, // its is return Request failed with status code 404
        error: false,
        ApiUrl: ApiUrl,
      },
    };
  } catch (e) {
    return {
      props: {
        error: true,
        homeData: null,
        message: e.message,
      },
    };
  }
}

getServerSideProps使用したデータからデータを取得できませんuseEffect

useEffect(() => {
  if (typeof props.homeData === "string") {
    console.log(props); // it is showing error 'Request failed with status code 404'
  } else if (props.homeData) {
    console.log(props.homeData);
    // setData(props.homeData);
  } else {
    axios
      .get(apiBaseUrl + "/api/my-url")
      .then((response) => {
        seteData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }
}, [props]);