NextJS -你能在条件函数中使用api的返回值吗？

export async function getServerSideProps() {
  // 调用 API 获取返回值
  const data = await fetch('/api/data');
  const responseData = await data.json();

  return {
    props: {
      responseData, // 将 API 返回值作为属性传递给页面组件
    },
  };
}

function MyComponent({ responseData }) {
  // 使用 API 返回值进行条件判断和渲染
  if (responseData) {
    return <div>{responseData}</div>;
  } else {
    return <div>Loading...</div>;
  }
}

import { useState, useEffect } from 'react';

function MyComponent() {
  const [responseData, setResponseData] = useState(null);

  useEffect(() => {
    // 调用 API 获取返回值
    fetch('/api/data')
      .then((data) => data.json())
      .then((responseData) => {
        setResponseData(responseData);
      });
  }, []);

  // 使用 API 返回值进行条件判断和渲染
  if (responseData) {
    return <div>{responseData}</div>;
  } else {
    return <div>Loading...</div>;
  }
}