🔥 Trouble Shooting - Next.js 서버/클라이언트 컴포넌트 API 호출 오류

🚨 문제 상황

상세페이지에서 메타데이터를 추가하는 과정에서 라우터 핸들러로 만든 api를 사용해야 해서 api를 호출하였는데, Next.js 서버 컴포넌트(page.tsx, generateMetadata)에서 API 호출 시 "Failed to parse URL" 오류가 발생했습니다. 클라이언트 컴포넌트에서는 잘 작동하던 API 호출 함수가 서버 컴포넌트에서는 동작하지 않았습니다.

💻 문제 발생 코드

// utils/api/hospitalDetail.ts
const hospitalDetail = async (id: string) => {
  try {
    const res = await fetch(`/api/hospitalDetail?id=${id}`);
    
    if (!res.ok) {
      throw new Error('Failed to fetch hospital detail');
    }
    const data = await res.json();
    return data;
  } catch (error) {
    console.error('Error fetching hospital details:', error);
    throw error;
  }
};

// app/hospital/[...id]/page.tsx
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const id = params?.id[0];
  
  try {
    // 여기서 오류 발생: Failed to parse URL
    const detailData = await hospitalDetail(id);
    return {
      title: detailData.dutyName,
      description: detailData.dutyAddr,
    };
  } catch (error) {
    console.error('Error:', error);
    return { title: '병원 정보' };
  }
}

🤔 원인 분석

이 문제는 Next.js의 서버 컴포넌트와 클라이언트 컴포넌트의 실행 환경 차이 때문에 발생했습니다:

• 클라이언트 컴포넌트: 브라우저에서 실행되어 상대 경로(/api/...)가 현재 브라우저의 URL을 기준으로 올바르게 해석됩니다.
• 서버 컴포넌트: Node.js 환경에서 실행되어 상대 경로가 서버의 파일 시스템 경로로 해석되어 URL 파싱 오류가 발생합니다.

✅ 해결 방법

실행 환경을 감지하여 적절한 URL을 생성하는 유틸리티 함수를 구현했습니다:

// utils/api/hospitalDetail.ts
export const getHospitalApiUrl = (id: string) => {
  // 브라우저에서 실행 중인지 확인
  const isClient = typeof window !== 'undefined';

  if (isClient) {
    // 클라이언트에서는 API 라우터 사용
    return `/api/hospitalDetail?id=${id}`;
  } else {
    // 서버에서는 절대 URL 사용
    const baseUrl = process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}`
      : 'http://localhost:3000';

    return `${baseUrl}/api/hospitalDetail?id=${id}`;
  }
};

const hospitalDetail = async (id: string) => {
  try {
    const apiUrl = getHospitalApiUrl(id);
    const res = await fetch(apiUrl);

    if (!res.ok) {
      throw new Error('Failed to fetch hospital detail');
    }
    const data = await res.json();
    const detailData = data.data[0];
    return detailData;
  } catch (error) {
    console.error('Error fetching hospital details:', error);
    throw error;
  }
};

🎯 해결 포인트

1. typeof window !== 'undefined'를 사용해서 클라이언트 사이드인지 서버 사이드인지 확인
2. 서버 환경에서 절대 URL을 사용하지 않았다면 서버 컴포넌트에서 API 호출이 실패했을것
3. 환경에 따라 다른 URL 전략을 사용하였습니다.

📝 배운 점
1. Next.js의 서버 컴포넌트와 클라이언트 컴포넌트의 실행 환경 차이를 이해
2. typeof window를 활용한 환경 감지 기법
3. 서버와 클라이언트에서의 URL 해석 차이를 이해

🔄 개선된 점
1. 서버와 클라이언트 컴포넌트에서 동일한 API 함수를 사용
2. API 호출 로직을 한 곳에서 관리
3. 환경 변수를 활용