[Next.js] 서버 컴포넌트 / 클라이언트 컴포넌트

서버 컴포넌트

---

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

별도로 설정하지 않는 이상 서버에서 실행됨.

로딩 속도 빠름

자바스크립트 기능 넣을 수 없다. useState, useEffect등 사용 불가

검색 엔진 노출도 이점이 있을 수 있다.

 

그래서 node API 사용할 수 있으나 브라우저 API는 사용 못 함(메모리, 로컬호스트, 상태관련된 것들)

 

서버 구성 요소를 사용하면 초기 페이지 로드가 더 빨라지고 클라이언트 측 JavaScript 번들 크기가 줄어든다. 기본 클라이언트 측 런타임 환경은 캐시 가능하고 크기를 예측할 수 있어서 애플리케이션 규모가 커진다고 해서 번들링되는 사이즈가  커지지 않으니까 성능이 좋다. JavaScript는 클라이언트 구성 요소를 통해 애플리케이션에서 클라이언트 측 상호 작용이 필요한 그 컴포넌트에 한에서만, 그 로직에 필요한 자바스크립트 코드만 클라이언트 상으로 보내진다.

경로가 Next.js로 로드되면 초기 HTML이 서버에서 렌더링된다. 그런 다음 이 HTML은 브라우저에서 점진적으로 향상되어 클라이언트가 Next.js 및 React 클라이언트 측 런타임을 비동기식으로 로드하여 애플리케이션을 인계하고 상호 작용을 추가할 수 있다.

---

 

클라이언트 컴포넌트

---

클릭 이벤트 등 작은 단위 컴포넌트를 만들어야 한다. 

useState, useEffect등 사용 가능

파일 멘 위에 아래 문구 입력 

'use client'

서버상에 pre-render 되어서 클라이언트에서 hydrated된다.

로딩 속도 느림.

 

---

큰 페이지는 server component

JS기능 필요한 곳만 client component

---

 

언제 서버 컴포넌트를 쓰고, 언제 클라이언트 컴포넌트를 쓸까?

---

component 문법

//작명은 대문자로 시작
function 작명() {
	return ( 축약할 긴 HTML 안에 넣는다 )
 }
    
 
//가져다 쓰기
<작명 />