Next.js 컴포넌트는 종류가 2가지이다.
1. server component
2. client component
1. server component
page.js, layout.js 등등 javascript 코드 없는 순수 html코드들은 전부 server component이다.
👍🏻server component의 장점
페이지 로드시 자바스크립트 코드가 별로 필요 없기 때문에 로딩이 빠르다
👎🏻server component의 단점
html 안에 자바스크립트 코드를 넣을 수 없다. 따라서 useState, useEffect, onClick 등등 이와 같은 문법을 사용할 수 없음.
2. client component
js파일의 최상단에 'use client' 라는 코드를 넣으면
그 아래 있는 모든 컴포넌트는 client component가 된다.
(참고로 파일의 중간쯤에 'use client' 넣는 건 불가능함, 무조건 맨 위)
👍🏻client component의 장점
html 안에 자바스크립트 코드를 마음대로 넣어 개발할 수 있음
👎🏻client component의 단점
자바스크립트 코드가 있기 때문에 용량이 커지고, 로딩속도가 느려질 수 있다.
_hydration_ : html코드를 로드하여 사용자에게 먼저 보여주고 여기에 react 문법을 적용하기 위해 컴퓨터가 html을 읽고 분석하는 과정이 필요한데 이를 hydration이라 부른다. 이 과정을 시행하는 데에 페이지 로드속도가 느려진다.
따라서 큰 페이지에 보통 server component로 만들고 JavaScript 코드가 필요한 부분은 client component로 만들어서 넣는 방식을 취한다.
