2-1. React Server Component & Client Component

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

서버 컴포넌트

• 서버상에서 실행되는 컴포넌트

컴포넌트의 실행 환경이 브라우저인지, 서버인지에 따라 서버 컴포넌트인지 클라이언트 컴포넌트인지 결정

1. 메서드 테스트를 통해 런타임 환경 이해하기
   1. alert
      서버 컴포넌트에서 (Node.js 런타임 환경)는 사용할 수 없음
   2. os.hostname
      서버 컴포넌트에서(Node.js 런타임 환경)사용이 가능

// src>app>page.tsx
export default function Home() { 
	// console.log("여기는 어디일까요?");
	
	const os = require("os");
	console.log("Hostname:", os.hostname());
	return (
	<div className="p-8">
	안녕하세요. 넥스트입니다! </div>
	);
}

클라이언트 컴포넌트

• 브라우저 상에서 실행되는 컴포넌트
  alert, confirm처럼 유저와의 상호작용이 필요한 메서드, 기능은 사용할 수 없음
  마찬가지로 useEffect, useState처럼 client-side rendering을 위해 사용된 기술들도 사용할 수 없음
  "use client";코드를 컴포넌트 최상단에 붙여 사용 가능

User와의 상호작용이 있는 경우 클라이언트 컴포넌트 를, 그 외의 경우는 서버 컴포넌트 를 쓰도록 권장

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