데브코스를 마치고 1기 사람들끼리 스터디를 하나 만들어 NextJS를 사용한 아카이브를 만들기로 하였다.

나는 NextJS를 12버전을 사용했던 기억이 있는데, 14로 버전업 되면서 굉장히 많은 것이 바뀌었다.

이번에 타입스크립트도 같이 사용해본다 하니 NextJS와 Typescript를 공부해보려한다.

오늘의 집중 탐구 섹션은 NextJS가 렌더링 되는 방식!

NextJS에서는 application을 어떻게 render할까?

NextJS가 맨 처음에 하는 일은 우리가 언제 페이지로 가든지 사용자에게 응답을 주기전에 NextJS는 backend에서 우리 application을 pre render하게 된다.

모든 component를 가져가서 non interactive한 HTML로 바꾸어준다.
그리고 이 HTML을 사용자에게 보여준다.

사용자가 웹사이트에 도착하자마자 우리는 HTML을 전달하고 동시에 프레임워크와 ReactJS를 initialize하게된다.

이때 use client 명령어를 가진 component가 hydrate 되는 일이 발생한다.

hydrate는 interactive 되어진다는 뜻

이것은 기존의 NextJS 옛 버전과는 다른 방식으로 어떤 component를 hydrate할건지 선택한다는 점이다.

이전 버전에서는 모든 component가 hydrate되었었다.

이것이 use client 명령어를 사용하는 이유이다.

use client는 framework에게 어떤 component가 interactive하다는 것을 알려주는 명령어.

즉, frontend에서 hydrate가 되어야하는 컴포넌트를 framework에게 알려주는 뜻.

hydration은 우리가 받은 HTML의 위에서 React application을 실행한다는 뜻이다.

예를 들어, h1 태그의 텍스트 내용은 hydrate가 될 필요 없다는 것을 알고 있을 것이다. 하지만 button은 hydrate가 되어야 한다는 것을 알고 있을 것이다.
따라서 React는 button만 hydrate하게 된다.

hydrate는 그냥 eventListeners를 추가하고 interactive하게 만들어준다는 것이다.

이점은 사용자들이 다운받아야 하는 javascript 코드의 양이 줄어든다는 점이다.
이유는 페이지마다 모든 javascript 코드를 다운받는 대신 interactive한 javascript 코드만 다운받을 수 있다는 것이다.

use client는 client에서"만" render 한다는 의미가 아닌 client에서"도" render 된다는 의미.

모든 컴포넌트(client component, server component)는 use client가 있든 없든 상관없이 backend에서 먼저 server side render로 pre render(HTML) 된다.

여기서 use client 명령어가 중요한 이유는 어떤 component가 hydrate 되는지, 즉 어떤 것이 interactive를 필요로 하는지, 어떤것이 자바스크립트가 필요한지, 불필요한지 등을 결정할 때 사용되기 때문이다.

server component 안에는 client component를 가질 수 있지만 그 반대인 경우는 불가능하다.

요약

• 모든 것이 첫 번째로 server side rendering 된다.
  - 모든 것이 pre render되어서 HTML로 변환된다.
• HTML이 사용자에게 넘겨지고, 그 후에 client components만이 hydrate되고, interactive하게 된다.
• server component는 DB와 통신을 할 수 있다.
  - API key를 사용하여 API를 fetch한다고 하면 그 코드는 client로 절대 넘어가지 않기 때문에 보안에 신경쓰지 않아도 된다.