[넥스트 Next.js] 클라이언트 컴포넌트와 서버 컴포넌트

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

서버 컴포넌트
서버 환경(Node.js 등)에서 실행되는 컴포넌트.
클라이언트(브라우저)의 요청을 서버에서 처리하고, 주로 HTML 등의 정적 리소스를 생성한다

클라우드 컴포넌트
클라이언트(브라우저)에서 실행되는 컴포넌트
자바스크립트와 같은 동적 리소스를 처리하며, 주로 사용자 인터랙션에 응답하고 UI를 업데이트한다

 

 

서버 컴포넌트 예시코드

• console.log는 node 환경에서 작동한다 

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

  return (
    <div className="p-8">
      안녕하세요! 내배캠 리액트.. 아니아니 넥스트입니다!
    </div>
  );
}

 

 

 

클라이언트 컴포넌트 예시코드

• 컴포넌트 최상단에 "use client"  입력 후 실행하면 브라우저의 console.log에서 작동하게 된다

"use client";

// src>app>page.tsx
// dev mode + production mode
export default function Home() {
  console.log("여기는 어디일까요?");

  return (
    <div className="p-8">
      안녕하세요! 내배캠 리액트.. 아니아니 넥스트입니다!
    </div>
  );
}