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

app 폴더에 있는 컴포넌트는 기본적으로 서버 컴포넌트이다.

 

되도록 무조건 서버 컴포넌트로!
정말 필요한 곳에서만 클라이언트 컴포넌트로!

 

1. Next.js 13부터는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 작동합니다.

2. 서버 컴포넌트로 실행된 코드는 서버에서 만들어져 HTML 형태로 클라이언트에 전송되기 때문에 콘솔 로그는 브라우저에서 실행되지 않습니다.

3. 서버에서 동작하기 때문에 브라우저에서 제공하는 API는 사용할 수 없지만, Node.js API는 사용 가능합니다.

 

 

클라이언트 컴포넌트

- app 폴더가 아닌 별도의 components 폴더에 파일을 생성

'use client';

import { useState } from 'react';

export default function Counter() {
 const [count, setCount] = useState(0);
 return (
  <>
   <p>{count}</>
   <button onClick={() => setCount((num) => num + 1)}>
   </button>
  </>
 );
}