Next.js에서는 라우트를 정적으로 또는 동적으로 렌더링할 수 있다.
정적 라우트에서는 컴포넌트가 빌드 시 서버에서 렌더링된다. 작업의 결과는 캐시되어 이후의 요청에서 재사용된다.
동적 라우트에서는 컴포넌트가 요청 시 서버에서 렌더링된다.
Static Rendering (Default)
정적 렌더링은 모든 렌더링 작업이 미리 완료되어 사용자에게 지리적으로 가까운 콘텐츠 전달 네트워크 (CDN)에서 제공됨으로써 성능을 향상시킨다.
동적 렌더링을 선택하려면 레이아웃이나 페이지에서 dynamic function 또는 dynamic data fetching를 사용하면 된다. 이렇게 하면 Next.js가 요청 시 전체 라우트를 동적으로 렌더링하게 된다.
다음 표는 동적 함수와 정적 데이터 가져오기 (캐싱)가 라우트의 렌더링 동작에 어떤 영향을 미치는지 요약한 것이다.
| Data Fetching | Dynamic Functions | Rendering |
|---|---|---|
| Cached | No | Static |
| Cached | Yes | Dynamic |
| Not Cached | No | Dynamic |
| Not Cached | Yes | Dynamic |
라우트가 정적으로 렌더링되려면 데이터 요청이 캐시되어 있고 동적 함수가 없어야한다.
앞으로 Next.js는 레이아웃과 페이지를 라우트에서 전체적으로 정적 또는 동적으로 렌더링하는 대신 독립적으로 정적 또는 동적으로 렌더링할 수 있는 하이브리드 서버 측 렌더링을 도입할 예정이다.
Static Data Fetching (Default)
기본적으로, Next.js는 캐시 동작에서 명시적으로 캐시 사용을 해제하지 않는 fetch() 요청의 결과를 캐시한다. 즉, 캐시 옵션을 설정하지 않은 fetch 요청은 force-cache 옵션을 사용한다.
라우트 내에서 revalidate 옵션을 사용하는 fetch 요청이 있다면, 재확인 중에 라우트가 정적으로 다시 렌더링될 것이다.
Dynamic Rendering
동적 함수는 요청 시에만 알 수 있는 사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수와 같은 정보에 의존한다. Next.js에서 이러한 동적 함수는 다음과 같다.
-
Server 컴포넌트에서
cookies()또는headers()를 사용하면 요청 시 전체 라우트가 동적 렌더링된다. -
Client 컴포넌트에서
useSearchParams()를 사용하면 정적 렌더링을 건너뛰고 클라이언트에서 가장 가까운 상위 Suspense 경계까지 모든 Client 컴포넌트가 렌더링된다.useSearchParams()를 사용하는 Client 컴포넌트를<Suspense/>경계로 감싸는 것을 권장한다. 이렇게 하면 위에 있는 다른 Client 컴포넌트가 정적으로 렌더링될 수 있다.
-
searchParams페이지 속성을 사용하면 페이지가 요청 시 동적 렌더링된다.
Using Dynamic Data Fetches
동적 데이터 가져오기는 cache 옵션을 'no-store'로 설정하거나 revalidate를 0으로 설정하여 캐싱 동작을 명시적으로 제외하는 fetch() 요청이다.
레이아웃이나 페이지의 모든 fetch 요청에 대한 캐싱 옵션은 segment config 객체를 사용하여 설정할 수 있다.
[출처]
https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering
