처음 Server Side Rendering을 접했던 것은 Next.js의 getServerSideProps를 통해서 알게 되었습니다.
서버에서 HTML을 만들어 보내는데, 사용자는 한동안 빈 화면만 보고 있었습니다. 서버가 데이터를 다 가져오고 렌더링을 마칠 때까지 브라우저에 도착하는 것이 아무것도 없었기 때문입니다.
그러다 다른 서비스들의 기술 블로그와 발표 영상을 보면서 Streaming SSR이라는 것을 알게 되었습니다. 같은 시간이 걸리는데도 화면이 채워지는 방식이 다르고, UX 측면에서도 빠르다는 느낌을 받았습니다.
서버가 보내는 데이터는 같다. 다른 것은 언제 보내느냐뿐이다.
Streaming SSR을 적용해보기 전에 이것을 이해하고 싶어서 직접 만들어보며 정리했습니다. React가 응답을 어떻게 쪼개 보내고 브라우저가 그것을 어떻게 이어 붙이는지 따라갑니다.