렌더링?

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

Client side rendering

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

<<리액트>>
처음에 화면에 아무것도 없는 빈화면이였다가, ui가 그려짐
마치 깜빡이는것처럼.
아무것도 없는 빈화면이었을때 자바스크립트 코드가 로드되면 ui가 그려지는거다. 자바스크립트가 로드되기전까지는 빈화면임.

Server side rendering

<<Next.js>>
Next.js는 디폴트로 서버사이드 렌더링임 (백엔드에서 ui(html)렌더링함)

클라이언트 컴포넌트든, 서버 컴포넌트는, 'use client'를 쓴 컴포넌트든 우선적으로 서버사이드렌더링이 된다.
(ex. console.log를 작성하면 터미널에 찍히는걸 확인할수있음)

즉, 모든 컴포넌트와 페이지들은 백엔드에서 렌더링된다.
('use client' 사용 여부와 상관없음)

Hydration

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


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

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

'use client'

Client Components

모든 컴포넌드들이 서버사이드에서 먼저 렌더링됨
하지만.. 위에서 설명한 Hydration 과정은 모든 컴포넌트에 대해 발생하지않는다.

client에서 hydrate되는 컴포넌트들은, 즉 client 에서 interactive하게 만들어질 컴포넌트들은 오직 use client 지시어를 맨 위에 갖고있는 컴포넌트들뿐.

즉, use client 라는 키워드가 컴포넌트 파일에 정의되면
'이 컴포넌트는 client에서 interactive해야해'
'이 컴포넌트는 hydrated되어야 해'
라고 말하는 것.

그럼 client에서만 렌더가 된다는건가?😳🧐
NOoOooOo
백엔드(서버)에서 렌더되고, 프론트에서 hydrate된다고!!!!

사실 use client가 아닌, use hydrate였다면 더 좋았을듯^^

server component

use client를 선언하지 않는 모든 컴포넌트
서버에서 렌더되지만 hydrate되지않음

예를 들어, 이 page.tsx에서는 서버에서만 실행되니까 db와 통신할 수 있겠다.
api 통신같은걸 여기서 하는거임.👇

참고

client component안에는 server component를 가질 수 없었는데 가질 수 있다. prop을 통해 전달해야한다고 한다
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

server component 안에 client component는 가질 수 있다.