서버컴포넌트
•
서버에서 빌드 될때 실행되는 컴포넌트
•
app 폴더 하위의 컴포넌트는 default로 서버 컴포넌트다.
•
서버 컴포넌트는 서버에서 실행이 된다.
•
서버에서 브라우저에게 html 형태로 넘겨준다.
따라서, 브라우저에서 실행이 되지 않는다. (console.log 등이 브라우저에 표시 안되는 이유)
•
브라우저 API 를 사용할 수 없다. (window 같은 것)
•
서버 API(노드 API) 를 사용할 수 있다.
클라이언트 컴포넌트
•
반드시 CSR 을 한다는 말이 아님.
◦
클라이언트 컴포넌트 전체가 다 번들링형태의 JS방식으로 전달되는 것이 아님!
◦
NextJS가 클라이언트 컴포넌트 내부에서 HTML로 뺄수 있는 부분을 찾아 프리렌더링을 하여 추려내고 동적인 이벤트, 클릭, 상태 등등의 요소들만 하이드레이션으로 내보냄!
•
클라이언트에서 사용하는 이벤트(클릭), 상태등을 사용하는 컴포넌트를 의미.
•
페이지 컴포넌트 전체를 클라이언트 컴포넌트로 만들지 말자.
•
최대한 작은 단위로(재사용 가능한) 컴포넌트를 만들자. (리액트 원칙)
•
app에는 페이지와 관련된 컴포넌트만 두고, 별도로 components 파일을 만들어 사용하자.
•
서버상에서 pre-rendering 까지 처리 된 경우, 화면상에는 보이나, 이벤트나 상태는 작동이 되지 않음.
•
이벤트 등을 처리하기 위해서, 하이드레이션이 일어나야함.
클라이언트 컴포넌트의 예시)
클라이언트 컴포넌트가 왜 서버에서 실행되나요?
클라이언트 컴포넌트(숫자 0, 증가 버튼)를 포함한 HTML 정적 페이지(강의에서 localhost)가 프리렌더링 되어 브라우저에 전달되기 때문. 버튼 클릭했을 때 숫자 증가 시켜주는 건 안 되지만, 숫자와 버튼 정도는 정적 페이지에 미리 만들어 줌! 따라서, 클라이언트 컴포넌트라고 무시하고 넘기는 게 아니기 때문에 "안녕! - 클라이언트"가 실행되는 것!
V12 → V13 으로 넘어오면서 왜 서버 컴포넌트를 이용하는것인가?
•
V12 당시 Page에서 클라이언트 컴포넌트를 사용할 경우, 불필요한 부분 조차도 클라이언컴포넌트로 이용하는 꼴이 된다.
•
클라이언트 측 JS 번들 크기가 줄어들고, 초기 페이지 로드가 더 빨라진다.
•
작은 부분만을 클라이언트 컴포넌트로 로드함에 따라, 성능향상을 꽤 할 수 있다.
서버 컴포넌트와 클라이언트 컴포넌트를 언제 사용하는가?
서버 컴포넌트와 클라이언트 컴포넌트를 선택하는 것을 간단하게 만들기 위해, 우리는 클라이언트 컴포넌트를 사용하는 사용 사례가 나타날 때까지 서버 컴포넌트를 사용하는 것을 권장한다. (앱 디렉토리의 기본 설정).
