Next.js / React Server Component 주의사항 핵심 요약

 

1. 서버 컴포넌트에서 브라우저 API 사용이 불가능 하다.

 

- 서버에서 실행되기 때문에 사용하면 바로 오류가 발생한다.

- window, document, localStorage, navigate, react 훅 등 사용이 불가능하다.

- Client Component로 분리하여 사용이 가능하다. (코드 상단에 'use client' 표시로 client 컴포넌트 표시)

 

2. useState( ), useEffect( ) 등 사용이 불가능 하다.

 

- react 훅 (useState, useEffect, useReducer, useRef) 등 사용이 불가능하다.

- Client Component로 분리하여 사용이 가능하다. (코드 상단에 'use client' 표시로 client 컴포넌트 표시)

 

3. Props  직렬화가 제한 된다.(서버 컴포넌트 import 후 사용이 되질 않는다.)

 

- 함수, class instance, Map, Set, Date, Symbol 사용이 불가능하다.

-  JSON  직렬화 가능한 데이터만 전달 가능하다.

 

4. 서버 컴포넌트는 서버에서만 실행된다.

 

- DB 조회, API 호출, 파일 시스템 접근을 서버 컴포넌트에서 한다면 안전성이 보장된다.

 

5. Client Component를 import 한다면?

 

- 서버 컴포넌트 안에서 Client 컴포넌트 import가 가능하다.

- 하지만 그렇게 한다면, 그 아래 트리는 전부 클라이언트 번들이 되기 때문에 주의해야한다.

- client 컴포넌트는 코드 실행이 2번이 이루어지기 때문에 server 컴포넌트를 사용할때 보다 자원 사용이 증가한다.