선생님 클라이언트 컴포넌트 질문입니다.

지금 제 폴더 구조는 이렇게 되어있습니다.
community/page.js는 게시판이고 
List.js가 게시판에있는 글 1개 입니다.

List.js의 글 제목을 누르면 detail/[id] (상세페이지)로 넘어가는데 
이 상세페이지 안에 글 수정 버튼이 있어서 그걸 누르면 edit/[id](글 수정페이지)로 페이지가 이동합니다.

근데 여기서 문제는 detail페이지는 서버 컴포넌트라 그냥 util/database.js에 있는 디비 데이터를 갖고올 수 있었는데
edit/[id]는 <Link>버튼으로 이동하고, 얘가 클라이언트 컴포넌트인데다 지금 tinyMce에디터를 쓰고 있어서 
디비에 있는 데이터를 어떻게 불러와야 되는지 모르겠습니다.ㅠㅠㅠ

디비 데이터를props로 전송하자니 detail페이지안에 <Link>버튼만 있고
fetch쓰려고 하니까 async랑 await은 클라이언트 컴포넌트라 못쓴다고 하구요ㅠㅠ 
import로 util/database.js에 있는 데이터를 불러오니까 db데이터도 fetch로 불러와서인지 왠지 모르게
tinyMce 에디터랑 만나면 자꾸 오류가 생깁니다...

(util/database.js)

let dbData;

export const fetchData = async () => {
  try {
    const response = await fetch(
      "https://f6f1-118-32-224-80.ngrok-free.app/community",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "ngrok-skip-browser-warning": "69420",
        },
        mode: "cors",
        cache: "no-store",
      }
    );

    if (response.status === 200) {
      const result = await response.json();
      const reversedData = result.data.reverse(); // 데이터를 역순으로 정렬
      //console.log("Fetched data:", reversedData); // 데이터를 콘솔에 출력
      dbData = reversedData; // dbData에 데이터를 할당
      return reversedData;
    } else {
      console.error("Failed to fetch data. Status:", response.status);
      dbData = null; // 에러 발생 시 dbData를 null로 설정
      return null;
    }
  } catch (error) {
    console.error("Error fetching data:", error);
    dbData = null; // 에러 발생 시 dbData를 null로 설정
    return null;
  }
};

//await fetchData();

export default dbData;

글수정 페이지에서 디비데이터를 불러와서 디비 내용 미리 채워놓고 수정하게 해야되는데... 며칠째 해결을 못하고 있습니다ㅠㅠ
도와주세요 선생님ㅠㅠㅠ