Next의 CSR과 SSR

렌더링이란?

• NextJS가 리액트 컴포넌트를 브라우저가 이해할 수 있는 html로 변환하는 작업

CSR

• 모든 렌더링이 클라이언트 측에서 발생
• 클라이언트는 자바스크립트를 로드하고, 자바스크립트가 UI를 빌드함

SSR

• NextJS로 웹 사이트를 빌드할 때, 기본적으로 SSR을 사용함
• Nextjs에서 모든 컴포넌트와 페이지들은 먼저 서버에서 렌더됨
  ('use client' 사용 여부와 상관없음)
• JavaScript가 비활성화 되거나 느리게 load 되어도 최소한의 HTML이 있음

하이드레이션(Hydration)이란?

• 서버사이드 렌더링(SSR)을 통해 만들어진 인터랙티브 하지 않는 HTML을 클라이언트 측 자바스크립트를 사용하여 인터랙티브한 리액트 컴포넌트로 변환하는 과정을 말한다.
  (서버 환경에서 이미 렌더링된 HTML에 React를 붙이는 것)

• Next.js는 초기 Html 파일을 먼저 전달하고 이후 HTML 요소들을 React 컴포넌트로 변환 및 이벤트리스너를 부착하여 React DOM에서 관리하게 한다. 이 과정을 Hydration(수분 보충)이라고 한다.

"use client"

• "use client"는 서버와 클라이언트 컴포넌트 모듈 간의 경계를 선언하는 데 사용된다.
  즉, 파일에 "use client"를 정의하면 하위 컴포넌트를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다.

• client components는 server에서 먼저 render되고 나서 hydrate 됨

• server components는 server에서 먼저 render되고 hydrate는 되지 않음
  => 사용자가 JavaScript를 더 적게 다운받아도 된다는 의미

• 만약 어떤 component를 interactive하게 만들 필요가 없다면,
  만약 client에 딱 한 번만 render되고 다시는 render될 일이 없다면,
  어떠한 useState나 onClick events 같은 것들이 없을 경우
  사용자에게 이 component를 위한 코드를 다운로드 받게 할 필요가 없다
  => 사용자가 받아야 할 JavaScript 코드의 양이 줄어든다는 의미
  => 사용자는 use client를 가진 components의 JavaScript 코드만 다운 받으면 됨
  => 페이지 로딩 속도 증가

패턴

• 지원되지 않는 패턴: 서버 컴포넌트를 클라이언트 컴포넌트로 가져오기
  서버 컴포넌트를 클라이언트 컴포넌트로 import 할 수 없다.
  https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components

• 지원되는 패턴: 서버 컴포넌트를 클라이언트 컴포넌트에 props로 전달
  서버 컴포넌트를 클라이언트 컴포넌트에 prop으로 전달할 수 있다.
  일반적인 패턴은 React children prop을 사용하여 클라이언트 컴포넌트에 "slot"을 만드는 것이다.
  https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props