0804
더닝크루거온다온다또온다그가온다온다
서버 컴포넌트와 SSR은 다르다
https://www.joshwcomeau.com/react/server-components/
이 글 번역 및 사담
서버 컴포넌트가 뭔데
react 18에서 도입된 새로운 기능으로
서버에서만 렌더링 되고
클라이언트로는 전송되지 않는 컴포넌트다.
SSR은 뭔데
React가 처음 등장했을 때는 클라이언트 렌더링 전략을 사용했다.
근데 JS가 다운로드 되고 AST로 파싱되고 React가 DOM 트리를 만드는 과정까지 사용자는 흰 화면만 바라봐야했다.
그래서 등장한게 서버 사이드 렌더링이다.
서버 사이드 렌더링을 구현하는 방법은 크게 두 가지다.
- 사용자가 도메인 주소에 접속 했을 때 서버 측에서 react를 렌더링하거나
- react를 js로 변환하고 모든 모듈을 번들링하는 컴파일 과정에서 html을 생성하거나 (ssg)
결론적으로 서버사이드렌더링에서 중요한건 초기 렌더링이 서버 런타임에서 이뤄지는가?다. 언제 html이 생성되는 지가 아니라.
- 근데 이 개념은 umbrella term으로 보는 시각에서만 적용된다. 서버 사이드라는 개념 자체를 포괄적으로 볼 때만 ㅇㅇ.
tanstack query나 swr 등과 같은 서버 상태 관리 라이브러리를 사용하면 클라이언트가 백엔드에 네트워크 요청을 보낼 때 백엔드는 데이터베이스에서 데이터를 가져와 네트워크를 통해 다시 전송한다.
이 그래프는 CSR과도 연관된다.
Download JavaScript 단계에선 실제 콘텐츠는 없지만 하나 이상의
<script>태그를 포함한다.Render Shell 단계에선 shell만 먼저 렌더링하는거다.
- 이 때 shell은 react app의 기본적인 구조를 의미한다.
사용자 네트워크 요청이 완료 된 후 Database Query에서 데이터를 갖고와서
실제 Content를 Render한다
- 반대로 SSR은 렌더쉘을 서버에서 가장 처음으로 갖고온다. - 하지만 사용자가 원하는건 쉘이 아니라 실제 콘텐츠(Render Content)다. - FCP(First Contentful Paint): 콘텐츠는 없더라도 쉘은 있는 상태
- TTI(Time To Interactive): react도 다운됐고 애플리케이션이 완전히 렌더링 된 상태
- LCP (Largest Contentful Paint): 쉘 안에 콘텐츠까지 띄워진 상태
- 근데 위 그림처럼 shell을 render할 때 데이터베이스도 같이 갖고오면 되는거 아닐까? - 따로 render shell 했다가 hydrate 끝나고 query 갖고오지말고. - 이게 server components다. 참고
아닌가? 아 헷갈려 다시 봐야될 것 같아
옛날 next.js 스터디 때 적은 포스팅은 완전 틀린 내용의 연속인 것 같다 ㅎ 창피
그니까 정리하자면
ssr은 클라이언트가 요청하면 서버에서 html을 만들어서 브라우저가 즉시 파싱할 수 있도록 해주는거고
rsc는 클라이언트가 요청하면 react 컴포넌트 트리를 json-like 형태로 서버에 전송한다는건가?
아 애초에 rsc는 "components"잖아 rsc랑 ssr이 상충하는게 아니라 ssr에서 rsc도 쓰일 수 있다는거 같은데