[Nextjs] Route segment 'force-dynamic' 가 필요할 때

 

프로젝트 구현을 진행하면서 새로운 페이지를 만들었다. 서버에 저장되어있는 데이터를 가져오기 위해서 이미 만들어져있던 데이터 호출 코드들을 그대로 재활용해서 진행을 했는데 개발모드에서는 괜찮았지만 빌드만 하면 계속해서 오류가 났다.  

 

정확히는 정적 렌더링하는 페이지에서 계속 오류가 나는 상황

 

데이터를 불러올 때 호출한게 서버API를 따로 만든게 아니라 nextjs가 지원하는 api route를 이용해서 severless 한 함수로 구현했다. 참고로 API 라우트를 사용하면 Next.js 어플리케이션에서 외부 데이터를 가져오거나 데이터베이스와 상호작용할 수 있다.

 

이 부분을 이해하기 위해서는 nextjs의 서버 렌더링에 대해서 알 필요가 있다.

---

 

nextjs 서버 렌더링에는 총 3가지가 있는데,

첫번째 Static (정적),

두번째 dynamic(동적),

세번째 Streaming 이다.

여기서 중요한건 정적렌더링과 동적렌더링이다. 

 

정적 렌더링이 기본값인데, 라우트가 빌드 시간에 렌더링되거나 데이터 재검증 후에 백그라운드에서 렌더링된다. 결과는 캐시되어 콘텐츠 전송 네트워크(CDN)에 푸시할 수 있다. 이 최적화를 통해 렌더링 작업의 결과를 사용자와 서버 요청 간에 공유할 수 있으며 사용자에게 맞춤화되지 않은 데이터가 있고 빌드 시간에 알 수 있는 경우 유용하며 이는 정적 블로그 글이나 제품 페이지와 같은 경우이다.

 

동적 렌더링에서는 라우트가 각 사용자에게 요청 시간에 렌더링된다. 라우트에 사용자에게 맞춤화된 데이터가 있는 경우 또는 요청 시간에만 알 수 있는 정보가 있는 경우에 유용하며 이는 쿠키나 URL의 검색 매개변수와 같은 경우이다. 동적 함수나 캐시되지 않은 데이터 요청이 발견되면 Next.js는 라우트 전체를 동적으로 렌더링하도록 전환한다.

 

스트리밍은 데이터가 조각조각 전송되면서 동시에 클라이언트에게 렌더링되는 방식으로 이는 전체 페이지가 완전히 렌더링되기를 기다리지 않고도 일부분이 클라이언트로 전송되고 렌더링될 수 있음을 의미한다. 이것은 빠른 초기 로드와 사용자 경험을 개선하는 데 도움이 될 수 있다.

---

 

 

 

 

오류가 난 사유에 대해서 코드를 뜯어보면 내용이 이해가 된다. 여기서 사용한 데이터 콜을 보면 revalidatePath('/') 를 쓰는데 이부분이 해당 /URL에 있던 캐시를 삭제하고 다시 생성해주는 함수인데 페이지를 다시 로드해주는 기능도 있다. 다시 로드해주는 기능이 동적인 렌더링에 해당. 정적인 렌더링을 할 수 없는 것인데 기본 값이 정적인 렌더링이 되다보니 오류가 계속 난 것이다. 

결국 문제 상황은 api route에서 동적 렌더링을 해야하는데, 페이지에서는 기본값인 정적 렌더링을 지원해서 문제가 생긴 것

 

이 부분의 간극을 풀어 줄 수 있는 것이 바로 Route Segment이다. 

 

Route Segment 옵션을 사용하면 페이지, 레이아웃 또는 라우트 핸들러의 동작을 직접 내보내는 변수를 구성할 수 있다.

다양한 옵션들이 있는데 그 중에서도 dynamic 옵션을 쓰면 레이아웃 또는 페이지의 동적 동작을 완전히 정적이거나 완전히 동적으로 변경할 수 있다. 

 

'force-dynamic': 강제 동적 렌더링으로 설정하여, 각 사용자의 요청 시간에 라우트가 렌더링됩니다. 
이 옵션은 페이지 디렉토리의 getServerSideProps()와 동등합니다.

 

'force-dynamic' 옵션은 라우트가 각 사용자의 요청 시간에 동적으로 렌더링되어야 할 때 사용되는 것으로 이는 라우트가 개인화된 데이터를 필요로 하거나 요청 시간에만 알 수 있는 정보를 포함할 때 유용하다. 예를 들어 사용자에게 특정 쿠키에 따라 다른 콘텐츠를 제공해야 하거나 URL의 검색 매개변수에 따라 다른 결과를 표시해야 하는 경우에 'force-dynamic'를 사용할 수 있습니다. 이는 getServerSideProps()와 비슷한 동작을 수행하며, 라우트를 동적으로 생성하고 사용자에 맞게 렌더링한다. 

즉, 정적 페이지 생성 과정에서 발생한 오류를 해결하기 위해 페이지를 동적으로 렌더링하여 문제를 우회한 것. 이는 페이지가 정적으로 생성되는 과정에서 필요한 데이터나 동적인 요소가 있어서 오류가 발생한 경우에 유용합니다. 

force-dynamic 옵션을 추가해서 동적 렌더링으로 우회해서 해결한 것이라고 생각된다

 

 

 

 

👇🏻 공식문서 페이지로 이동하기

File Conventions: Route Segment Config | Next.js