🔥 Trouble Shooting - async/await 말고 use()를 사용해보자

프로젝트를 진행하다가 리팩토링으로 서버 컴포넌트 내에서 async/await으로 사용중인 것들을 use()로 변경을 하던 와중에 use()가 적용이 되지 않는 경우가 발생하였는데,
그건 바로 metadata를 설정하고 있는 generateMetadata()에서의 사용이였다...

🚨 문제 코드

export function generateMetadata({
  params,
}: {
  params: { id: string };
}): Promise<Metadata> {
  const id = params?.id;
  const champion = use(fetchChampionDetail(id));
  if (!champion) {
    return {
      title: "알 수 없는 챔피언",
      description: "챔피언 정보가 없습니다",
    };
  }

  return {
    title: `${champion.title + " " + champion.name}의 상세 페이지`,
    description: `${champion.lore}`,
  };
}

use()부분에 아래와 같은 오류가 나타나게 되었는데..
왜 이런 오류가 발생한것인지
우선 use()에 대해서 좀더 알아보자!

React Hook "use" is called in function "generateMetadata" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"

---

🚀 use()란 무엇일까?

React의 use()는 Next.js의 서버 컴포넌트에서만 사용가능한 데이터 패칭 메서드로 많이 사용되는 async/await와 비슷한 역할을 하지만 사용 방법과 동작 방식이 다르다.

❓ use()와 async/await의 차이

구분	use(fetch())	await fetch()
사용 위치	서버 컴포넌트 내부에서만 가능	어디서든 사용 가능
렌더링 시점	컴포넌트 렌더링 중 실행됨	명시적으로 호출해야 실행됨
Suspense 지원	✅ 자동 로딩 상태 관리	❌ 직접 로딩 상태 관리 필요
자동 캐싱	✅ RSC 기능으로 자동 캐싱	❌ 기본적으로 캐싱 안 됨
코드 간결함	✅ 선언적이고 간결	❌ 추가적인 상태 관리 필요

🔥 use()는 반드시 컴포넌트 내부에서 사용해야 한다!

"use server";

export async function fetchChampion() {
	const res = await fetch("xxxx")
    return res.json()
}

// ❌ 이렇게 사용하면 에러 발생!
const champion = use(fetchChampion()); // ❌ 에러!

💥 위와 같이 작성시 오류 발생

🚨 에러가 발생하는 이유

• use()는 React의 렌더링 중에 실행되는 함수이기 때문에 컴포넌트 내부에서만 사용해야 함
• 컴포넌트 바깥에서는 React의 렌더링 컨텍스트가 없기 때문

✅ 올바른 사용 예시

const ChampionComponent = () => {
  const champion = use(fetchChampion()); // ✅ 정상 작동!
  return <h1>{champion.name}</h1>;
};

🔹 위와 같이 컴포넌트 안 use client내부에서 사용해야 정상적으로 동작함

---

🤔 그렇다면, generateMetadata()에서 use()를 사용하면 왜 안 될까?

💥 에러가 나는 이유

• gernerateMetadata()는 React 컴포넌트가 아니라 Next.js의 서버 함수이기 때문!
• 즉, React의 렌더링 컨텍스트에서 실행되지 않으므로 use()를 사용할 수 없게 된다.

📌 해결 방법: await을 사용하여 데이터 가져오기

결국은 돌고 돌아서 async/await 방식으로 사용을 하였다.

export async function generateMetadata({
  params,
}: {
  params: { id: string };
}): Promise<Metadata> {
  const id = params?.id;
  const champion = await fetchChampionDetail(id);
  if (!champion) {
    return {
      title: "알 수 없는 챔피언",
      description: "챔피언 정보가 없습니다",
    };
  }

➡ 이렇게 await을 사용하여 데이터를 불러오면 문제없이 실행되는 것을 볼 수 있다

⚠️ 잠깐

그렇다면 언제 use()를 쓰고, 언제 await fetch()를 써야할까?

🎯 use()와 await fetch()각각 적합한 경우는 언제일까?

✅ use(fetch())가 적합한 경우

• 서버 컴포넌트 내부에서 데이터를 가져올때
• Suspense를 활용하여 자동으로 로딩 상태를 관리하고 싶을 때
• 자동 캐싱을 원할 때 (동일한 요청을 여러 번 보내지 않도록)

✅ await fetch()가 적합한 경우

• 서버 액션 (use server) 또는 API 라우트에서 데이터를 가져올 때
• React 컴포넌트 바깥에서 실행해야 할 때 (generateMetadata, API 핸들러 등)
• 매 요청마다 새로운 데이터를 가져와야 할 때 (캐싱이 필요 없는 경우)

🚀 정리: use() vs await fetch() 한눈에 비교

항목	use(fetch())	await fetch()
사용법	use(fetch())	await fetch()
사용 위치	서버 컴포넌트 내부	어디서든 사용 가능
렌더링 방식	React 렌더링 중 실행	명시적으로 실행
Suspense 지원	✅ 가능	❌ 직접 관리 필요
자동 캐싱	✅ 지원	❌ 기본적으로 없음

💡 한마디로:

• 서버 컴포넌트에서 use()를 쓰면 더 깔끔하고 효율적
• 그 외의 경우에는 await fetch()를 사용하면 됨