Next.js에서는 라우트를 정적 또는 동적으로 렌더링할 수 있습니다.
기본적으로 Next.js는 성능을 향상시키기 위해 라우트를 정적으로 렌더링합니다. 빌드 시 서버 및 클라이언트 컴포넌트가 서버에서 렌더링되고 작업 결과가 캐시되어 후속 요청에 재사용됩니다.
<aside> 💡 클라이언트 및 서버 컴포넌트가 렌더링 되는 방식을 이해하려면 클라이언트 및 서버 컴포넌트 페이지를 참조하세요.
</aside>
동적 렌더링을 사용하면 라우트에 대한 서버 및 클라이언트 컴포넌트가 모두 요청 시점에 서버에서 렌더링됩니다.
렌더링 중에 동적 함수 또는 캐시되지 않은 데이터 요청이 발견되면 Next.js는 전체 라우트를 동적으로 렌더링하도록 전환합니다. 이 표에는 동적 함수와 데이터 캐싱이 라우트가 정적으로 렌더링되는지 동적으로 렌더링되는지에 영향을 미치는 방식이 요약되어 있습니다.
| Route | Dynamic Functions | Data |
|---|---|---|
| Statically Rendered | No | Cached |
| Dynamically Rendered | Yes | Cached |
| Dynamically Rendered | No | Not Cached |
| Dynamically Rendered | Yes | Not Cached |
위의 표에서 라우트가 완전히 정적이 되려면 모든 데이터가 캐시되어야 합니다. 그러나 캐시된 데이터와 캐시되지 않은 데이터 가져오기를 모두 사용하는 동적으로 렌더링되는 경로를 가질 수 있습니다. 이는 대부분 캐시된 데이터를 재사용하지만 일부 캐시되지 않은 데이터가 있는 페이지가 있을 때 유용합니다. 요청 시 모든 데이터를 가져올 때 성능에 미치는 영향에 대해 걱정하지 않고 동적 렌더링을 선택할 수 있습니다.
<aside> 💡 Good to know: 향후 Next.js는 전체 라우트가 아닌 라우트의 레이아웃과 페이지를 독립적으로 정적 또는 동적으로 렌더링할 수 있는 하이브리드 서버 사이드 렌더링을 도입할 예정입니다.
</aside>
동적 함수는 사용자의 쿠키, 현재 요청 헤더 또는 URL의 search params와 같이 요청 시점에만 알 수 있는 정보에 의존합니다. Next.js에서 이러한 동적 함수는 다음과 같습니다.
cookies() 및 headers() : 서버 컴포넌트에서 이 함수를 사용하면 요청 시 전체 라우트가 동적 렌더링으로 선택됩니다.