[Next.js] 리액트 서버 컴포넌트

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
3.4) 리액트 서버 컴포넌트 이해하기
3.5) 리액트 서버 컴포넌트 주의사항

3.4 리액트 서버 컴포넌트 이해하기

리액트 서버 컴포넌트란?

- 리액트 18 버전부터 새롭게 추가된 새로운 유형의 리액트 컴포넌트

- 서버 측에서만 실행되는 컴포넌트이다.

 

리액트 서버 컴포넌트가 나타나게된 배경

Page router에서의 사전렌더링을 다시 떠올려보면 하이드레이션(화면에 상호작용을 추가)을 위해 서버는 모든 JS 파일들을 묶는 번들링을 진행하고 브라우저에게 번들파일이 전달한다고 했다.

하지만 상호작용이 필요하지 않은 모든 자바스크립트 파일 또한 번들에 포함될 필요는 없다. 왜냐하면 후속으로 JS 번들 과정을 진행하기 전에 서버는 사전 렌더링을 통해 컴포넌트를 생성하기 때문이다. 

 

JS 번들에 포함되어야 할 컴포넌트

- useState나 useEffect 등의 리액트 훅스가 있는 컴포넌트

- 이벤트 행들러가 붙어 있어서 꼭 하이드레이션을 진행해야 하는 컴포넌트

 

Page router에서는 이러한 상호작용을 하지 않는 컴포넌트들을 신경쓰지 않기때문에 모든 JS 파일들을 번들링하여 번들의 용량이 쓸데없이 커지게 되고 그렇기 때문에 불러오는 시간도 오래걸린다.

 

따라서 이러한 상호작용이 필요한 컴포넌트(클라이언트 컴포넌트)들만 JS 번들에 포함시킨다면 이러한 문제를 해결할 수 있다.

 

리액트 서버 컴포넌트와 클라이언트 컴포넌트 생성 실습

서버 컴포넌트는 따로 만들어 줄 필요가 없다.

클라이언트 컴포넌트는 컴포넌트 상단에 'use client'; directive 지시자를 추가해준다.

'use client';

 

 

서버 컴포넌트에서 log를 찍더라도 브라우저에서 log가 출력되지 않는 것을 볼 수 있다. (대신 터미널 콘솔에는 출력된다.)

 

클라이언트, 서버 컴포넌트는 어떤 컴포넌트들이 되어야 하나?

상호작용이 있다 -> 클라이언트 컴포넌트

상호작용이 없다 -> 서버 컴포넌트

 

co-location

page router에서는 search.tsx 이런 파일 역시 path로 여겼는데,

app router에서는 page.tsx, layout.tsx을 제외한 모든 파일을 일반적인 자바스크립트 또는 타입스크립트 파일로 간주하기 때문에 page.tsx와 동일한 위치에 search.tsx와 같은 파일을 생성해도 path로 여기지 않는다.

 

이러한 특징을 co-location이라고 한다.

---

3.5 리액트 서버 컴포넌트 주의사항

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

- 서버 컴포넌트는 브라우저에서 아예 실행조차 되지 않는다.

- useState, useEffect 등의 리액트 hooks나 onClick, onChange 등의 이벤트 핸들러 역시 사용 불가능

- 브라우저 측에서 실행되는 기능의 라이브러리 또한 사용 불가능

 

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

서버 컴포넌트 

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

 

클라이언트 컴포넌트

- 사전 렌더링을 위해 서버에서 1번 실행

- 하이드레이션을 위해 브라우저에서 1번 실행

-> 서버와 클라이언트에서 모두 실행됨

 

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

"use client";

import ServerComponent from "./server-component.tsx"; // 불가능

export default function ClientComponent() {
	return <ServerComponent />
}

오류 발생하며, 의도치 않은 동작이 발생할 수 있다.

 

클라이언트 컴포넌트는 서버 & 브라우저에서 모두 실행된다.

서버 측에서 실행할 때는 서버 컴포넌트를 import 해올 수 있겠지만,

브라우저 측에서 실행할 때는 서버 컴포넌트가 존재하지 않기 때문에 오류가 날 수 있다.

 

하지만 Next.js는 저러한 실수가 발생한 경우, 저 ServerComponent를 Client Component로 바꿔주게 된다.

 

그럼에도 ServerComponent를 Client Component에 포함시켜야 하는 상황이라면?

위 코드처럼 import 하지말고 props로 활용해라

"use client";

export default function ClientComponent({children}: {children: ReactNode;}) {
	return <div>{children}</div>;
}

 

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

직렬화란?

객체, 배열, 클래스 등의 복잡한 구조의 데이터를 네트워크 상으로 전송하기 위해 아주 단순한 형태(문자열, Byte)로 변환하는 것

// Before
const person = {
	name: "이정환",
    age: 27,
};

// After
{"name":"이정환","age":27}

 

자바스크립트 함수는 직렬화가 불가능하다.

- 자바스크립트 함수는 어떠한 값이 아닌 코드블럭을 포함하고 있는 특수한 형태이기 때문에

- 클로저나 렉시컬 스코프 등의 다양한 환경에 의존해 있는 경우가 많아 모든 정보들을 단순한 문자열이나 바이트의 형태로 표현할 수 없기 때문

 

사전 렌더링 과정

- 서버 컴포넌트들이 먼저 실행이 되고 나중에 클라이언트 컴포넌트들이 뒤이어 실행된다.

- 서버 컴포넌트들만 따로 한 번 실행시켜주면 그 결과로 HTML 태그가 바로 실행이 되는 게 아니라 RSC 페이로드(React Server Component Payload : RSC 결과물)라는 JSON 비슷한 형태의 문자열이 생성된다.

 

RSC payload : RSC를 직렬화한 결과라고 생각하면 된다.

 

RSC payload 에 포함되는 값

- 서버 컴포넌트의 렌더링 결과

- 연결된 클라이언트 컴포넌트의 위치

- 클라이언트 컴포넌트에게 전달하는 Props 값

 

클라이언트 컴포넌트 실행

이후에 아직 실행하지 못한 클라이언트 컴포넌트들도 마저 실행되어 RSC 페이로드와 합쳐져 HTML 페이지가 완성되게 된다.

직렬화할 수 없는 JS 함수는 클라이언트 컴포넌트에게 전달하는 Props로 전달이 불가능하기 때문에 런타임에러가 난다.

 

따라서 서버 컴포넌트에서 클라이언트 컴포넌트에게 props로 함수처럼 직렬화가 불가능한 값을 보내주게 되면 안된다.