Next.js에서 서버 컴포넌트를 렌더링하는 방법

Next.js는 서버에서 React의 기능을 사용해 페이지를 렌더링한다. 이때, 렌더링 작업은 라우트(segment)와 Suspense Boundary 단위로 나뉘어 실행된다.

서버에서 일어나는 과정

  1. 서버에서 React는 Server Components를 특별한 데이터 형식(RSC Payload) 으로 변환한다.

    • 서버 컴포넌트의 JSX 렌더링 결과
    • 빈자리 -> 서버 컴포넌트는 클라이언트 컴포넌트를 포함이 가능하므로, 해당 클라이언트 컴포넌트와 그에 필요한 자원을 응답받아야 하기 때문에 이를 기억한다.

  2. Next.js는 RSC Payload 와 Client Components의 JavaScript 코드 를 사용해 HTML을 생성합니다.

    • 클라이언트 컴포넌트에서 작성한 자바스크립트 코드도 defaultValue나 static 한 값을 Nextjs가 서버에서 처리해서 조합해준다.

클라이언트에서 일어나는 과정

  1. 서버에서 생성한 HTML을 즉시 보여준다. 서버에서 생성된 HTML을 먼저 보여주어 빠르게 첫 화면을 렌더링할 수 있도록 한다. (이 과정에서 JS를 이용한 인터렉션은 불가능함)

  2. 서버에서 받은 RSC Payload를 가지고 reconcile(재조정) 단계가 발생하여 실제 DOM을 조정한다. 왜냐하면? 클라이언트 컴포넌트를 포함하고 있으면 이러한 빈자리를 채워서 트리 구조가 되어야함.

  3. 클라이언트 컴포넌트를 활성화(Hydrate)한다. Client Components의 JavaScript 코드가 실행되며, 버튼 클릭이나 입력 등의 인터랙션이 가능해진다.

RSC payload는 무엇인가? 참고: