개발자
류준열

Next App-router에서 use client가 CSR을 뜻하지는 않는다.

Next app router를 이용해서 블로그를 만들고 있는데, javscript를 꺼도 클라이언트 컴포넌트가 렌더링되었다.

"use client";
export const Hi = () => {
  return <div>{"data.aritlcle.markdown"}</div>;
};

어찌되었든 JS를 껐음에도 use client를 설정한 클라이언트 컴포넌트가 렌더링 되고 있었다는 것은 클라이언트 컴포넌트가 CSR이 아니라는 것이다.

공식문서에 클라이언트 컴포넌트 (use client) 가 어떻게 렌더링 되는지 볼 수 있었다.

클라이언트 컴포넌트는 요청에 전체 페이지 로드인지, 후속탐색(subsequent navigation)인지에 따라 다르다.

전체 페이지 로드

Next에서 정적 HTML을 렌더링한다. 즉, 클라이언트가 JS번들을 로드하는 것을 기다릴 필요 없이 즉시 페이지의 컨텐츠를 볼 수 있다.

1. RCC도 일단 Next서버에서 서버 구성요소를 RSC Payload 라는 특수한 데이터 형식으로 렌더링한다. 그 후 JS 지침에 따른 HTML을 렌더링한다.

2. 그 다음 DOM을 업데이트 하고, Javascript에 따라 hydration이 일어난다.

후속 탐색(Subsequent Navigation)

후속탐색시 SSR되는것 없이 클라이언트에서 완전히 렌더링된다. 이는 기존 리액트처럼 JS번들이 다운로드 된 후에 DOM이 업데이트 됨을 의미한다.