Next.js 13부터 렌더링 방식을 제어할 수 있는 새로운 설정이 도입되었습니다. export const dynamic = 'force-dynamic'을 사용하면 해당 페이지나 API 라우트를 항상 서버 측에서 동적으로 렌더링하도록 강제할 수 있습니다.
특정 페이지가 항상 최신 데이터를 반영해야 할 때 유용합니다. 기본적으로 Next.js는 정적으로 렌더링할 수 있는 페이지를 빌드 시 정적 HTML로 생성하지만, force-dynamic을 설정하면 매 요청마다 새로운 HTML이 생성됩니다.
dynamic: 'force-dynamic'이 필요한 상황
-
실시간 데이터 업데이트: 자주 변경되는 데이터를 반영해야 하는 경우. 예를 들어, 실시간 데이터가 필요한 페이지.
-
사용자 맞춤 정보 제공: 각 사용자마다 다른 데이터를 보여줘야 할 때. 로그인한 사용자별로 서로 다른 콘텐츠를 제공해야 하는 페이지.
-
변경 사항 반영: 페이지가 빌드 시점의 데이터로 고정되지 않고, 최신 상태를 항상 보여줘야 하는 경우.
사용 예시
// app/dashboard/page.jsx
export const dynamic = 'force-dynamic';
export default function Dashboard() {
// 이 컴포넌트는 항상 서버에서 동적으로 렌더링됩니다.
return <div>동적 대시보드 페이지</div>;
}위 예시에서, dynamic = 'force-dynamic' 설정으로 인해 대시보드 페이지는 빌드 시 정적으로 생성되지 않으며, 매번 서버 요청이 있을 때마다 동적으로 HTML이 생성됩니다. 이를 통해 사용자는 항상 최신 데이터를 볼 수 있습니다.
다른 옵션과의 비교
-
dynamic = 'auto'(기본값): Next.js가 페이지를 정적으로 생성 가능한지 자동으로 판단하여 정적 또는 동적 렌더링을 선택합니다. -
dynamic = 'force-static': 해당 페이지를 항상 정적으로 생성하도록 강제합니다. 정적 콘텐츠를 제공하여 성능을 최적화할 때 유용합니다.
주의사항
-
성능 고려: 동적 렌더링은 매 요청마다 새로운 HTML을 생성하기 때문에, 트래픽이 높은 페이지에서는 서버에 부하가 갈 수 있습니다.
export const dynamic = 'force-dynamic'은 Next.js에서 항상 최신 데이터를 반영해야 하는 페이지를 구축할 때 유용한 설정입니다. 동적 렌더링이 필요한 경우에만 사용하고, 성능에 미치는 영향을 고려하여 적절한 캐싱 전략과 함께 사용하는 것이 중요합니다.
