들어가며
기본적으로 Next.js는 서버 컴포넌트를 사용한다. 이를 통해 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며, 필요할 때 클라이언트 컴포넌트 사용을 선택할 수 있다. 그래서 클라이언트 컴포넌트는 언제 사용하는가?🤔 같이 알아보자.
Server Component
- 페이지를 요청할 때마다 서버에서 해당 페이지의 HTML을 생성하여 클라이언트에게 전달한다.
- 검색 엔진 최적화(SEO)에 유리하며, 초기 로딩 시간이 짧은 사용자 경험을 제공한다.
Client Component
- 초기에는 서버에서 빈 페이지를 제공하고, 그 후에 자바스크립트가 실행되어 클라이언트에서 페이지를 렌더링한다.
Server Component와 Client Component 특징
Server Component
Next.js에서는 /app 디렉터리 내부에 컴포넌트를 만들면, 디폴트로 Server Component가 된다.
- 모든 컴포넌트는
Server Component가 디폴트이다. 따라서 Client Component로 사용하고 싶다면,'use Client'를 입력해주면 된다. - 자바스크립트 번들 감소
Hydration과정이 없다.
(정적인 HTML 요소들에 JS 코드들이 결합되며 버튼 클릭에 따른 이벤트 처리 등이 가능한 것)- Event Listener(onClick 등) 사용 불가
- React Hooks(useEffect 등)사용 불가
- Client Component 사용 불가
- async 함수로 정의 가능
Client Component
Client Component를 정의하기 위해서는 컴포넌트 파일 최상단에
'use client'를 추가해 주면 된다.
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}장점 : html 안에 자바스크립트 마음대로 넣어서 기능 개발 가능
단점 : 자바스크립트로 인해 페이지 용량도 커지고 로딩 속도도 느려질 수 있다.
특히 client component를 로드하려면 hydration이라는 과정을 거치게 되는데 html을 로드하고 나서 거기에 리액트 문법을 적용하기 위해 컴퓨터가 html을 읽고 분석하는 과정이 필요한데 그걸 hydration이라고 부른다.
hydration이란?
Server-Side에서 렌더링 된 정적 페이지(HTML)와 번들링 된 JS 파일을 클라이언트에게 보내면, Client-Side에서 HTML 코드와 JS(React) 코드를 서로 매칭시키는 과정
hydration 과정을 이해하려면 next.js렌더링 방식을 정확히 이해하고 있어야 한다. 렌더링 방식은 다음에 알아보자.
Server Component, Client Component 언제 사용할까?
이표는 Server Component와 Client Component의 다른 사용 사례를 요약
참고
안녕하세요:)