Nextjs 렌더링 과정

13 버전 App Router 기준입니다.

애플리케이션 코드를 렌더링할 수 있는 두 가지 환경(클라이언트 및 서버)이 있다.

React 18 이전에는 전적으로 클라이언트에서 웹 애플리케이션을 렌더링했다.

이후에는 React DOM이 제공하는 hydrate 기능을 통해 서버에서 HTML을 렌더링해서 내보낼 수 있었다.

그러나 이로 인해 초기 HTML을 대화식으로 만들기 위해 클라이언트에 추가 JavaScript가 필요했다.

이제 서버 및 클라이언트 컴포넌트를 사용할 수 있기 때문에, React는 클라이언트와 서버에서 각각 렌더링할 수 있으므로 컴포넌트 단에서 렌더링 환경을 선택할 수 있게 되었다.

기본적으로 App Router는 서버 컴포넌트를 사용하므로 서버에서 컴포넌트를 쉽게 렌더링하고 클라이언트로 전송되는 JavaScript의 양을 줄일 수 있다.

Next.js는 정적 및 동적 렌더링을 사용하여 서버에서 렌더링을 최적화할 수 있는 옵션을 제공한다.

정적 렌더링을 사용하면 서버 및 클라이언트 컴포넌트 모두 빌드 시 서버에서 미리 렌더링할 수 있게 된다.

작업 결과는 캐시되어 후속 요청에서 재사용된다. 또한 캐시된 결과에 대해 유효성을 다시 검사할 수도 있는 옵션도 제공한다.

서버 및 클라이언트 구성 요소는 정적 렌더링 중에 다르게 렌더링할 수 있다.

클라이언트 컴포넌트에는 HTML 및 JSON이 미리 렌더링되어 서버에 캐시되어 있다. 캐시된 결과는 hydrate를 위해 클라이언트로 전송된다.
서버 컴포넌트는 React에 의해 서버에서 렌더링되며 해당 페이로드는 HTML을 생성하는 데 사용된다. 동일한 렌더링된 페이로드는 클라이언트 컴포넌트를 hydrate하는 데에도 사용되므로 클라이언트에 JavaScript가 필요하지 않게 된다.

동적 렌더링을 사용하면 서버 및 클라이언트 구성 요소가 모두 요청 시 서버에서 렌더링된다. 작업 결과는 캐시되지 않는다.