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

기본적으로 넥스트에서 app폴더 하위의 모든 컴포넌트는 서버 컴포넌트 이다

 

서버컴포넌트?

말 그대로 서버에서 실행되는 컴포넌트이다.

코드상에서 확인해보면, 넥스트상에서 이렇게 콘솔을 찍어보자. 콘솔이 어디에 찍힐까?

// src>app>page.tsx
export default function Home() {
  console.log("여기 어디?");

  return (
    <div className="p-8">
      안녕하세요! Next.js 입니다!
    </div>
  );
}

 

 

터미널에서 찍히고, 브라우저에서도 "server"에서 찍히고 있다고 말해주고 있다.

 

그렇다면 서버 환경에서 상호작용 메서드는 어떻게 될까?

 

해당 메서드를 찾지못한다..

 

클라이언트 컴포넌트?

당연하게도 브라우저 상에서 실행되는 컴포넌트 이다.

서버컴포넌트에서는 alert,confirm과 같은 유저와의 상호작용이 필요한 메서드 들은 사용할수 없다. 마찬가지로 useEffect, useState 와 같은 클라이언트 사이드 랜더링을 위해 사용된 기술들도 사용할수 없다.

그런데, 이러한 기능을 사용하고 싶을때는 어떻게 해주면 될까?

"use client"; 코드를 컴포넌트 최 상단에 넣어주면 해당 컴포넌트를 클라이언트 컴포넌트로 사용할 수 있다.

 

앞에 서버컴포넌트에서는 사용할수 없었던 alert메서드가 정상 작동 하는 모습을 볼 수 있다.

 

 

그렇다면 언제 어떻게 서버/클라이언트 컴포넌트를 써야할까?

공식문서를 보면, 유저와 상호작용이 있는 경우 클라이언트 컴포넌트를, 그 외의 경우에는 서버 컴포넌트를 쓰도록 권장하고 있다.

 

하지만 꼭 필요한 곳에만 "use client"를 이용하여 클라이언트 컴포넌트로 만들어야한다!

 

코드예시

"use client";

// src>app>page.tsx
export default function Home() {
  return (
    <div className="p-8">
      안녕하세요! 넥스트입니다!
      <section>
        <h1>제목</h1>
        <p>내용</p>
        <ul>
          <li>항목1</li>
          <li>항목2</li>
          <li>항목3</li>
        </ul>
      </section>
      <button
        onClick={() => {
          alert("안녕하세요!");
        }}
      >
        클릭
      </button>
    </div>
  );
}

 

"use client"; 코드를 통해 클라이언트 컴포넌트라는것을 알수있지만 실제로 유저와 상호작용 하는 코드는 버튼 컴포넌트 - onClick 하나 뿐이다.

Next.js의 default는 서버 컴포넌트이다. 꼭 필요한 곳에만 “use client”를 이용해서 클라이언트 컴포넌트로 만들어야 한다.

 

// src>app>page.tsx

import Button from "@/components/Button";

// src>app>page.tsx
export default function Home() {
  return (
    <div className="p-8">
      안녕하세요! 넥스트 입니다!
      <section>
        <h1>제목</h1>
        <p>내용</p>
        <ul>
          <li>항목1</li>
          <li>항목2</li>
          <li>항목3</li>
        </ul>
      </section>
      <Button />
    </div>
  );
}

 

버튼을 컴포넌트로 빼주자.

// src>components>Button.tsx

"use client";

import React from "react";

const Button = () => {
  return (
    <button
      onClick={() => {
        alert("안녕하세요!");
      }}
    >
      클릭
    </button>
  );
};

export default Button;

 

정리

• Next.js에서 기본은 서버 컴포넌트이다.
• 클라이언트 컴포넌트를 사용하고 싶을때는 최상단에 "use client"; 코드를 작성해준다
• 꼭 필요한 곳에만 "use client"를 이용해서 클라이언트 컴포넌트로 만들어주어야 한다.