React Server Component 가 해결하는 진짜 문제?!(렌더링 최적화)
- 함수는 코드이며 실행 컨텍스트(메모리, 스코프)에 의존하므로 직접 직렬화할 수 없습니다. 🚫
- React Server Components는 함수를 직접 직렬화하는 대신, JSON으로 직렬화 가능한 "함수 호출 계획" 태그 형태로 변환하여 전송 가능하게 만듭니다. 📝
- "함수 호출 계획"은 실제 실행 코드가 아닌 함수 이름과 인자를 설명하는 JSON 데이터 구조이므로, 값으로서 전송이 가능합니다. 🗺️
- 서로 다른 환경에서 일관된 실행 결과를 보장하기 위해, RSC는 JSON 호출 계획과 실제 함수 정의를 참조하여 처리하는 "인터프리터"를 활용합니다. ⚙️
- 인터프리터는 재귀적 처리 방식을 통해 함수 호출 순서를 동적으로 제어할 수 있으며, 이는 렌더링 최적화에 중요한 역할을 합니다. 🔄
- "태그"는 JSX와 유사하며, 이는 가상 DOM을 형성하고, React의 인터프리터가 이를 파이버 노드처럼 처리하여 렌더링을 수행합니다. 🌳
- RSC가 해결하려는 근본적인 문제는 컴포넌트 실행 환경을 클라이언트에서 서버로 확장하는 것입니다. 🌐
- 서버에서 컴포넌트를 실행함으로써 무거운 연산 오프로드, 보안 강화, 클라이언트 JS 번들 크기 감소를 통한 성능 최적화를 달성합니다. 🚀
- 클라이언트 컴포넌트는 서버 렌더링 트리의 "구멍" 역할을 하며, 상호작용 요소나 브라우저 API가 필요한 부분을 클라이언트에서 나중에 실행하도록 합니다. 🕳️
데브허브 | DEVHUB | React Server Component 가 해결하는 진짜 문제?!(렌더링 최적화)