React 서버·클라이언트 경계와 데이터 페칭

프론트엔드

ReactRSCNext.js

이 글은 누구를 위한 것인가

React Server Components와 클라이언트 컴포넌트를 나누는 풀스택·프론트 분을 위한 글입니다. “서버에서 fetch하면 되지?”에 비밀·직렬화 조건이 붙습니다.

비밀은 서버에

토큰·내부 URL은 클라이언트 번들로 새지 않게 합니다.

직렬화

서버에서 클라이언트로 넘기는 props는 직렬화 가능해야 합니다. 함수·클래스 인스턴스는 안 됩니다.

워터폴

서버에서 병렬로 가져올 수 있는 데이터는 한 레이어에서 모읍니다.

맺으며

경계는 성능만이 아니라 보안 모델입니다.