정적/동적 렌더링

정적 및 동적 렌더링

정적 경로에서는 컴포넌트가 빌드 시점에 서버에서 렌더링 됩니다. 작업 결과는 캐시되어 후속 요청에서 재사용됩니다.

동적 경로에서는 요청 시점에 컴포넌트가 서버에서 렌더링 됩니다.

정적렌더링(기본값)

정적렌더링은 모든 렌더링 작업이 미리 수행되고 사용자와 지리적으로 가까운 CDN(콘텐츠 전송 네트워크)에서 제공될 수 있으므로 성능이 향상됩니다.
layout이나 page에서 동적 함수 또는 동적 데이터 가져오기를 사용하여 동적 렌더링을 선택할 수 있습니다. 이렇게 하면 요청 시점에 전체 경로를 동적으로 렌더링 합니다.

경로가 정적으로 렌더링되는 경우, 데이터 요청이 캐시되고 동적 함수가 없다.

정적 렌더링 페이지들은 프로젝트 빌드 시점에 HTML 파일이 생성되고, 모든 요청에 재사용된다.
그리고 가까운 CDN에 캐시된다. 정적으로 렌더링되는 경우는, 데이터 요청이 캐시되고 동적함수가 없는 경우이다.

동적 렌더링

정적렌더링중에 동적 함수, 동적 fetch()요청이 발견되면, 요청시점에 전체 경로를 동적으로 렌더링 하는 것으로 전환합니다. 캐시된 데이터 요청은 동적 렌더링 중에도 계속 재사용할 수 있습니다.

동적렌더링 페이지들은 모든 요청 시점에 html을 생성한다. 매 요청마다 서버에서 렌더링해서 내려준다.
정적렌더링중에 동적함수나 동적 fetch를 만나면, 라우트는 즉시 동적 렌더링으로 전환한다.

동적 함수 사용

동적 함수는 사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수와 같이 요청 시점에만 알 수 있는 정보를 사용합니다.

• 서버 컴포넌트에서 cookies(), headers()를 사용하면 요청 시 전체 경로를 동적 렌더링으로 선택합니다.
• 클라이언트 컴포넌트에서 useSearchParams()를 사용하면 정적 렌더링을 건너뛰고 대신 클라이언트에서 가장 가까운 상위 suspnese 경계까지 모든 클라이언트 컴포넌트를 렌더링합니다ㅏ.