서버 컴포넌트 vs 클라이언트 컴포넌트

https://nextjs.org/docs/app/building-your-application/rendering/client-components

Rendering: Client Components | Next.js

 

Next.js에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트입니다.

별도로 설정하지 않으면 컴포넌트는 서버에서 실행되며, 예를 들어 console.log를 사용할 경우 콘솔이 브라우저 콘솔이 아닌 서버 터미널에 출력됩니다.

이는 서버 컴포넌트가 서버에서 실행되기 때문에 발생하는 현상으로, 브라우저는 서버에서 렌더링된 HTML만 받아서 화면에 표시하게 됩니다.

그리고 서버 컴포넌트는 서버에서만 동작하기 때문에 브라우저에서 제공하는 API(Web API)를 사용할 수 없습니다.

하지만 서버 측에서 Node.js API를 사용하여 파일 시스템에 접근하거나 데이터베이스와 상호작용하는 작업은 가능합니다.

단, 서버 컴포넌트에서는 React의 상태 관리 훅(useState, useEffect 등)을 사용할 수 없습니다.

만약 사용자의 이벤트 처리나 상태 관리를 해야 한다면, 해당 부분은 클라이언트 컴포넌트로 만들어야 합니다.

클라이언트 컴포넌트를 사용해야 할 때

클라이언트 컴포넌트를 사용할 필요가 있는 경우, 해당 컴포넌트 최상단에 use client 를 명시합니다.

"use client";

import { useState } from "react";

export default function Input() {
    const [text, setText] = useState("");
    return (
        <>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                className="border"
            />
            {text}
        </>
    );
}

여기서 중요한 것은 클라이언트 컴포넌트를 만든다고 해서 그것이 클라이언트 사이드 렌더링을 의미하는 것은 아니라는 점입니다.

Next.js는 가능한 한 모든 컴포넌트를 정적으로 생성하여, 사용자가 페이지를 요청하면 정적인 HTML을 먼저 보내줍니다.

클라이언트 컴포넌트는 사용자의 이벤트 처리나 브라우저에서 실행되어야 하는 코드를 포함하는 부분입니다.

이 컴포넌트는 클라이언트에만 관련된 코드를 포함하며, 정적인 HTML이 먼저 로드된 후, 리액트 라이브러리와 함께 브라우저에서 실행되어야 할 추가적인 자바스크립트 코드들이 다운로드되어 하이드레이션이 이루어집니다.

이로 인해 전체 페이지를 클라이언트에서 처리하는 대신, 필요한 부분만 클라이언트에서 실행되어 자바스크립트의 전송량이 줄어들어 성능이 최적화됩니다.