[Next.js] server component vs. client component

server component

• 기본적으로 생성하는 컴포넌트

• 장점: 페이지 로드 시 자바스크립트가 아예 필요 없어서 빠르다.

• 단점: html 안에 자바스크립트를 넣을 수 없다. ⇒ useState, useEffect, onClick … 등등 사용 불가능

client component

• 컴포넌트 파일 맨 위에 ‘use client’ 작성

• 장점: html 안에 자바스크립트 마음대로 넣어서 기능 개발 가능

• 단점: 페이지 용량도 커지고, 페이지 로딩 속도도 느려진다.

• 페이지 로드 속도 느려지는 이유
• html을 로드하고 나서 거기에 리액트 문법을 적용하기 위해 컴퓨터가 html을 분석하는 과정이 필요하다. (hydration)
• 이것 때문에 페이지 로드 속도가 더 느려진다.

⇒ 큰 페이지들은 보통 server component 로 만들고, 자바스크립트 기능이 필요한 특정 부분은 client component로 만들어서 넣는다.