동적 페이지여야 할 페이지가 정적 페이지가 됐다

상황은 /api/list 경로에서 매번 동적이여야 하는 페이지가 정적 페이지가 되어 버렸다. 빌드때 생긴 빈값페이지가 계속 나가는 상황이다.

예시 코드)

typescript

export async function GET() {
  try {
    const uuids = (await Cache.get<string[]>(VIDEO_LIST_FILE)) || [];

    if (!Array.isArray(uuids) || !uuids.length) {
      return NextResponse.json([]);
    }

    const videos = (await Promise.all(uuids.map((uuid) => Cache.get<VideoInfo>(uuid)))).filter(
      (video) => video
    );

    return NextResponse.json(videos);
  } catch (error) {
    return NextResponse.json(
      { error },
      { status: 400 }
    );
  }
}

uuid목록을 불러와서 video 내용들을 가져오는 코드인데 매번 확인을 해야 하는 작업이지만 Cache.get() || [] 이 부분 때문인지 항상 빈 배열이라도 있다보니 Static Page로 인식이 됐다.

해결법 1

File Conventions: Route Segment Config | Next.js

Learn about how to configure options for Next.js route segments.

https://beta.nextjs.org/docs/api-reference/segment-config#dynamic

typescript

export const dynamic = 'force-dynamic'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

force-dynamic을 붙여주면 getServerSideProps와 같이 매번 서버에서 동작한다.

해결법 2

이 방법은 꼼수같긴 한데 다른 안쓰는 메서드를 추가해서 오류로 뱉어버리면 된다. GET을 사용한다면 POST를 오류전용으로 쓰면 됨. GET아래에 POST를 추가하면 된다.

typescript

export async function GET() {
	// 원래 코드
}

export async function POST() {
  return NextResponse.json(
    {
      error: 'not supported'
    },
    {
      status: 400
    }
  );
}

앞에 아이콘이 람다로 됐다.

View Archive