3. Next.js server component vs client component

1) [server component ]

page.js, layout.js에 대충 만드는 컴포넌트들은 전부 server component 

장점 :

페이지 로드시 자바스크립트가 별로 필요가 없어서 빠름

단점 :

html 안에 자바스크립트를 못 넣는다.

useState, useEffect, onClick 이런거 사용불가능

2) [client component]

장점 : 

html 안에 자바스크립트 맘대로 넣어서 기능개발 가능 

단점 : 

쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려짐

 

 

3) 그러면 Next.js에서 client component는 어떻게 만드냐

 *use client*

컴포넌트 만들 때 페이지 맨 위에 'use client' 라는 코드를 넣으면 
그 밑에 있는 모든 컴포넌트는 client component가 됩니다. 

 
특히 client component를 로드하려면 hydration이라는 과정을 거치게 되는데
html을 로드하고나서 거기에 리액트 문법을 적용하기 위해
컴퓨터가 html을 읽고 분석하는 과정이 필요한데 그걸 hydration이라고 부릅니다.
그거 때문에 페이지 로드속도가 더 느려집니다. 

3) server component vs client component

 

server component

큰 페이지들

client component
자바스크립트 기능이 필요한 특정 부분

성능 그딴거 필요없고 귀찮으면 그냥 client component 많이 쓰자