1. 개요

오직 서버측에서만 실행되는 컴포넌트

기존 next.js는 js bundle을 브라우저로 넘길 때 'react hook, 이벤트 핸들러' 등 상호작용이 있는 컴포넌트와 상호작용이 없는 컴포넌트 둘 다 넘긴다.

상호작용이 없는 컴포넌트는 굳이 브라우저에 여러번 전송(hydration)할 필요가 없다.

페이지 라우터는 모든 컴포넌트를 묶어 브라우저에 전송하기 때문에 js bundle의 용량이 커지게 된다.

그래서 이런 문제를 해결하기 위해 서버 컴포넌트를 사용한다.

2. 서버 컴포넌트

딱 한번만 실행되고 여러번 실행될 필요가 없다.

기본적으로 모든 컴포넌트가 서버 컴포넌트이기 때문에 클라이언 컴포넌트(기본 상호작용이 있는 컴포넌트)만 따로 설정해주면 된다. - console.log가 찍히지 않음

사용

"use client"

클라이언트 컴포넌트로 만들고자 하는 파일 맨위에 디렉티브(지시자- 상단의 문구)를 입력해준다. (따옴표까지)

서버 컴포넌트와 클라이언트 컴포넌트의 구분

• 서버 컴포넌트
  HTML의 고유의 기능인 link 등은 서버

• 클라이언트 컴포넌트
  useState, useEffect 등 상호작용이 일어나는 페이지

주의사항

1. 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되어서는 안된다.

• 상호작용이 일어나면 안된다. (useEffect, useState, onChange, onClick, 라이브러리 ...)

2. 클라이언트 컴포넌트는 클라이언트만 실행되지 않는다.

• 처음에 서버 클라이언트와 같이 실행이 된다.

3. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다.

• 초반에는 두 컴포넌트가 같이 실행이 되어 동작하지만 브라우저에서 하이드레이션을 위해 한번 더 실행이 될 때는 클라이언트 컴포넌트의 코드는 존재하지만 서버컴포넌트는 존재하지 않아 없는 코드를 import하게 되어 가능하지 않다고 한다.
• 컴포넌트 양이 많아지게 되면 불편함이 따른다 이때 next.js는 서버 컴포넌트를 자동으로 클라이언트 컴포넌트로 바꿔준다. 최대한 서버 컴포넌트로 사용하기
• 그래서 클라이언트 컴포넌트에 children을 사용하여 서버 컴포넌트를 넘겨주는 형식으로 사용

4. 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다.

• 직렬화 : 객체, 배열, 클래스 등의 복잡한 구조의 데이터를 네트워크 상으로 전송하기 위해 아주 단순한 형태(문자열, byte)로 변환하는 것
• 서버 컴포넌트에서 클라이언트 컴포넌트로 함수같은 값들은 props로 전달할 수 없다.