frontendmastery라는 사이트에서 next13의 설명을 보면서 스트리밍이라는 말이 등장하는데 chatgpt처럼 한글자씩 렌더링 되는걸 말한다고 했다
한글자씩은 오버인것같고 사실 페이지단위였는데
이제는 컴포넌트단위로 동시성으로 렌더링 할 수 있다는 말인것 같다
RSC(React Server Component), Suspense, Concurrent와 같은 리액트의 특징이
어떻게 스트리밍을 만드는지 궁금했는데...
먼저 서버컴포넌트가 뭐하는건지 찾아보다가 좋은 자료를 찾았다
처음 서버컴포넌트가 도입될때 리액트팀이 직접 작성한 질의응답이다.
RSC는 어떤 식으로든 상호 작용을 방해하지 않습니다. 서버 구성 요소를 앱 데이터 흐름의 "골격"으로 사용한 다음(예: 서로 다른 탭은 일부 데이터를 가져올 수 있는 다른 서버 구성 요소임) 뼈대 주위에 고기처럼 클라이언트 구성 요소를 그 주위에 배치합니다.
댄아브라모브 아저씨는 서버컴포넌트를 뼈에 비유했다
닷넷이나 피닉스프레임워크와 무엇이다른지 까지도 자세히 나와있었다
리액트가 실행되고있는 서버에서 html을 내려받는 SSR은 걍 jsp랑 비슷한건데
기존리액트(클라이언트컴포넌트)하고 섞어서 쓰면 좋은가보다
데이터접근이나 비용이큰계산을 프론트측 서버에서 해서
브라우저에서 받는 크기가 엄청 작다고 한다
즉 클라이언트에서 렌더링된 트리를 가져와 서버에서 일찍 가져오는 동시에
HTML을 일찍 플러시하여 클라이언트에서 자산을 다운로드하며
서버에서 데이터 가져오기를 병렬화하여 시작 시간을 개선한다는것 같다
SSG하고 섞일 수 없는건 아니고 빌드할때 기본값 다 서버에 요청해보고
먼저 렌더링 할 수 있는 부분은 한 다음에 CSR을 했던것 처럼
RSC도 빈 페이지가 아닌 상태에서 적용 할 수 있다
참고자료
리액트 모범사례 생각해보기
