한 입 크기로 잘라먹는 Next.js(v15) 3.5) 리액트 서버 컴포넌트 주의사항

<aside> 💡

Server component에서 Client component로 props를 전달할 때, 직렬화 될 수 없는 props는 전달할 수 없다.

</aside>

→ 이 때문에 CC 자식으로 SC를 넘기지 못해, children으로 우회하는 것이다.

직렬화(Serialization) ?

객체, 배열, 클래스 등 복잡한 구조의 데이터를 네트워크에 전달하기 위해 문자열, byte 등으로 단순화 하는 것

→ 이를 통해 RSC payload를 생성한다.

<aside> 💡

자바스크립트 함수는 직렬화 할 수 없다.

→ 함수는 그냥 값이 아닌, 코드 블럭을 포함하고 closure, lexical scope 등 다양한 환경에 의존하기 때문에 ❓

→ 따라서 server component에서 Client component로 함수를 props로 넘겨주는 것은 불가능하다.

</aside>

• 예시 코드

RSC payload ?

React Server Component의 순수한 결과물, 직렬화한 결과