문제

블로그 페이지를 만들고, 그 페이지들이 정적 렌더링이 잘 되는 것을 확인하고 개발을 진행한 적이 있다. 그러던 중 어느순간에 정적 렌더링이 되지 않고, 매 요청마다 새로운 렌더링을 하는 현상을 발견했다.

원인

app 상단에 위치하는 Proivder에서 Next.js에서 제공하는 함수 cookies 를 사용했다.

import { cookies } from 'next/headers';

function Proivder {
  const cookie = cookies().....
}

Next.js에는 정적 렌더링을 기본값으로 한다. 그러나 렌더링 중에 캐싱되지 않은 요청이나. dynamic function 을 사용할 경우 동적 렌더링으로 전환된다.

cookies 도 dynamic function 중 하나이고, Proivder에서 이를 사용했기 때문에 하위의 모든 페이지와 컴포넌트에서도 이 동적 데이터에 의존하게 된다. 따라서 기존에 정적 페이지로 잘 동작하던 페이지도 동적 페이지로 전환된 것이다.

해결

페이지 상단에 아래 코드를 붙여 넣어 해결하였다.

export const dynamic = 'force-static';

하지만 이 코드를 삽입하면 아래와 같은 문제점이 있으니 주의해야한다.

• 동적 데이터 접근 불가: 이 설정을 사용하면 headers, cookies 등의 요청 시점 데이터에 접근할 수 없게 된다. 이러한 함수들을 호출하면 기본값이나 빈 데이터를 반환한다.