[Next.js] 기초 3. 'use client'는 Client에서 Interactive하게 만들어주는 것

'use client'는 Client에서만 render한다는 의미가 아니다

'user client' 명령어가 있든 없든 모든 Component(Client Component, Server Component)는 Backend에서 먼저 pre-render가 되는데 그건 전부 interactive하지 않는 HTML로 변환되게 된다.

여기에서 'use client'를 사용하게 되면 어떤 Component가 hydreate 되는지, 즉 어떤 것이 Interactive를 필요로 하는지, 더 쉽게 말해 어떤 것이 JavaScript가 필요한지, 어떤 것이 불필요한지 등을 결정하는데에 사용하게 된다. 

정리해보자면 
1. 모든 것이 첫번째로 Server Side에서 Pre-Render가 되어서 HTML로 변환된다.
2. HTML이 사용자에게로 넘어간다
3. Client Components만이 Hydreate되고 Interactive하게 되는 것 이다.

여기에서 Hydration을 간단하게 설명해보자면 next.js에 의해 미리 렌더링된 html(pre-render) 페이지에 react의 반응성(후에 다운로드 되는 JavaScript 코드)를 입히는 것 이다.

Server SIde에서 Render 되는 부분에서는 Client로 가지 않기 때문에 관련 보안은 신경쓰지 않아도 되고,
따라서 API Key를 넣거나, DB랑 통신을 해도 괜찮다 (보안을 더 신경쓰고 싶은 분은 따로 관리를 해도 괜찮다.)