1. Rendering

1) Rendering이란?

• React Component의 props, state에 따라서 뷰(HTML)을 형성하는 작업입니다.
  한 마디로, React 코드로 작성된 Component를 HTML 소스로 변환하는 것을 뜻합니다.

2) Server Side Rendering / Client Side Rendering
1. 기본적으로 NextJS는 React기반의 Framwork로써, Server Side Rendering의 방식을 사용합니다.
2. 그 외에 create-react-app을 통해 직접 생성되는 React Application은 Client Side Rendering의 방식을 사용합니다.

• 즉, React 구조에서는 두 가지 방식이 존재하며, 두 가지 방식의 단어들의 뜻을 직역하면, 각각 다음과 같습니다.
  SSR(Server Side Rendering) : Server에서 Rendering이 이루어지는 것을 의미합니다.
  CSR(Client Side Rendering) : Client에서 Rendering이 이루어지는 것을 의미합니다.

3) CSR과 SSR의 특징 및 차이점

• React에서 제공이 가능한 두 가지 방식의 Render는 그 특징만큼이나, 차이점 역시 큽니다.

Rendering Remarks	CSR (Client Side Rendering)	SSR (Server Side Rendering)
특징	1. Rendering이 Client(웹 브라우저)에서 발생한다. 2. 서버에서 별도로 처리해주는 스크립트는 없다. 3. 클라이언트에서 JS를 다운로드 받는 동안 활성화되는 HTML 소스는 없다.	1. Rendering이 Server에서 발생한다. 2. 서버에서 초기 화면에 대한 렌더링을 별도로 처리해준다. 3. 클라이언트에서 JS를 다운로드 받는 동안 미리 렌더링한 html소스를 보여준다.
장점	1. 웹 페이지 Loading시, 서버에 부하가 적다 2. SPA(Single Page Application)방식으로 불러오기 때문에,    한번 불러온 다음 페이지 전환 시 빠르다.	1. MPA(Multi Page Application)방식으로 불러오기 때문에,    페이지 최초 로딩 시 화면이 빠릅니다. 2. 인터넷이 느린 상황에서도 최초에 화면을 렌더링 된 상태로    받기 때문에, 내용이 즉각 나타난다 3. 검색엔진 최적화(SEO)에 좋다.
단점	1. 최초 페이지 로딩 시, 전체 페이지에 JS를 한번에 받기 때문에,    인터넷이 느린 환경에서는 로딩이 오래 걸릴 수 있다. 2. 검색 엔진 최적화(SEO)에 취약하여 잘 드러나지 않는다. 3. 일반 HTML 렌더링에 대한 처리도 js를 통해 하기때문에,    자바스크립트를 비활성화 시, 화면이 나타나지 않는다.	1. 페이지 전환 시, SPA와 다르게 최초의 로딩을 반복한다. 2. 서버에서 최초 렌더링 작업을 수행 후 클라이언트로 넘기기    때문에, CSR 대비 서버에 부하가 있는 편이다.

2. Hydration

• React의 Hydration
  Server Side Rendering을 통해서, 서버에서 렌더링된 HTML소스를 받은 다음, 기존 CSR에서 사용하는 방식과
  같이 Javascript로 된 React Component로 Load하는 작업을 수행하는 것을 Hydration이라고 합니다.

• NextJS에서 사용하는 Anchor 태그 (<a>)는 최초에 서버에서 렌더링된 HTML로 호출이 된 다음,
  React App으로 Hydrate 작업을 거쳐서 <LinkComponent>로 변경 됩니다.

---

Hidration Diagram

Reference. Keeping Server-Side Rendering Cool With React Hydration (Link)

3. "use client"

• SSR 방식으로 운용되는 nextJS에서는 초기에 HTML을 반환하고,
  React Component로 변환하는 Hydration 작업을 수행합니다.
  이 때, Hydration을 하게되는 컴포넌트에는
  아래와 같이 키워드를 1번째 줄에 입력해야 합니다.

  "use client"

  ---

  • hook을 사용 중이지만, "use client" 커맨드를 추가하지 않았을 경우, 아래 사진과 같이 오류가 나타납니다.
    

  ---

  • 위와 같이 hook 함수를 사용하기 위해서는 Client Component이어야 하며, use client는 가장 최상단 줄에 입력을 합니다.

  • 한번 use client를 사용한 Component인 경우, 이 안에서 렌더링 된 Component들은 전부 Client Component로 인식됩니다.

  > Navigation.tsx / > Test.tsx
  

  • "use client"에 대한 선언은 항상 최상위 줄에 명시 되어야 합니다.
  • Navigation 컴포넌트 안에 렌더링 된 Test 컴포넌트는 Client Component에서 사용하고 있기 때문에,
    "use client" 선언 없이도 hook 함수를 사용할 수 있습니다.