server component vs client component

server component

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

장점: 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠르다.
단점: html안에 자바스크립트를 못 넣는다. Ex)useState, useEffect, onClick 사용 불가

client component

컴포넌트 페이지 맨 위에 'use client' 라는 코드를 넣으면 그 밑에있는 모든 컴포넌트들은 client comepont가 된다.

장점 : html 안에 자바스크립트 맘대로 넣어서 기능개발 가능하다.

단점 : 쓸데없는 자바스크립트로 인해 페이지 용량도 커지고 페이지 로딩속도도 약간 느려질 수 있다.

특히 클라이언트 컴포넌트를 로드할땐 hydration 이라는 과정을 거치는데, 이 과정 때문에 페이지 로드속도가 더 느려진다.

• hydration이란?: html을 먼저 로드하고, 거기에 리액트 문법을 적용하기위해서 컴퓨터가 html을 읽고 분석하는 과정을 말한다.
  (html을 유저에게 먼저 보낸 후에, 자바스크립트로 html을 다시 읽고 분석하는 일)
  (이 과정이없으면 정적인 html만 보냄)