1. 개요

Next.js 프레임워크를 프로젝트에 적용하면서 Routing, Next/API 제공, vercel 배포, 이미지 최적화 등 여러 편리한 기능을 사용했지만 Next.js의 주요 기능인 pre-rendering을 제대로 적용해보지 않았었다.

등산 관련 정보를 제공하는 이번 프로젝트는 Next.js Page Router 환경에서 산 이름 별 Dynamic Paths를 적용하기 위해 getStaticPath를 사용하였고, 정적 페이지 위주로 만들어졌기 때문에 기본 동기 데이터(산 이름, 위경도 등)는 getStaticProps를 통해 prop으로 받는 산 소개 페이지를 만들고, 여기에 비동기 데이터인 날씨 정보는 API를 산 소개 페이지 안에서 직접 useQuery를 사용해 데이터를 받고, 차트를 그리도록 했다.

현재 날씨 데이터는 초기 렌더링이 끝난 후 클라이언트 사이드에서 데이터를 비동기로 가져오는 방식

// 기존 코드(실제 코드 아닌 수도 코드)
// pages/mountain/[산이름].tsx

const MountainPage: React.FC<MountainPageProps> = ({ mountainData }) => {
   const { data: weatherData }
    = useQuery({
      {
        queryKey: ["getWeather", x, y],
        queryFn: () => getWeatherInformation(x, y),
      },
  });

  return (
    <div className="min-h-screen bg-gray-100">
      <MountainView mountainData={mountainData} weatherData={weatherData} /> // 날씨
    </div>
  );
};

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = MOUNTAIN_KEYS.map((mountainEnglishName) => ({
    params: { englishName: mountainEnglishName }
  }));

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps<{
  mountainData: Mountain;
}> = async ({ params }) => {
  const mountainData = MOUNTAIN_INFORMATION_LIST.find(
    (mountain) => mountain.englishName === params?.englishName
  );

  if (!mountainData) {
    return { notFound: true };
  }

  return {
    props: { mountainData }
  };
};

2. 진행 과정

a) 구조

<aside> 📁

b) API Routes 사용

c) getStaticProps에 useQuery로 날씨 데이터(Next/API) 가져오기

3. 문제 발생

4. 원인

5. 해결법