이번에 프로젝트 진행을 next.js를 쓸 지 고민하면서 알게된 점을 기록해둘 예정..
요약
첫페이지 로딩 속도: SSR > CSR
다른 페이지 이동 시 로딩 속도: SSR < CSR
서버 자원 사용량: SSR > CSR
SSR: Server Side Rendering
설명
말 그대로 서버 쪽에서 렌더링 준비를 끝마친 후에 클라이언트에 전달을 한다.
과정
- 클라이언트가 웹사이트를 호출
- 서버에서 바로 렌더링이 가능한 html 파일을 준비해서 클라이언트에 전달
- 클라이언트에서 받은 html 파일을 즉시 렌더함과 동시에 js를 다운
(js는 준비되지 않아서 그려지기만 하고 작동은 하지 않는다.)
- js를 다운받는 중의 활동을 기억하다가 브라우저에서 js프레임워크를 실행하면 기억한 활동을 이행
특징
SSR은 필요한 부분에 대해서만 서버에서 렌더링 준비를 해둔다. SSR로 개발된 웹의 첫페이지 접속 후 페이지에서 다른 페이지로 이동하면 서버에서 렌더링을 한 번 더 준비를 하기 때문에 매 페이지 로딩마다 시간이 걸린다.
사용자에게 웹페이지의 메인 화면을 빠르게 노출시킴으로써 답답함을 덜 느끼도록 제공할 수 있다. 하지만 여러페이지를 자주 이동하게 된다면 매 페이지마다 서버에 호출을 하기 때문에 서버에 부하가 생길 수 있다.
CSR: Client Side Rendering
설명
위와 반대로 클라이언트에서 렌더링을 진행하고 화면에 뿌려주는 방식이다. 클라이언트가 서버에 요구를 하면 그때 html과 js를 넘겨준다.
과정
- 사용자가 웹사이트에 요청을 보내면 서버(CDN)가 클라이언트에 html과 js에 접근할 수 있는 링크를 보냄
- 클라이언트가 html과 js를 다운받아서 렌더링 후 실행
- 데이터 값을 위해 API를 호출(이때부터 화면이 그려진다)
- 서버가 API 요청에 데이터를 반환해주면 화면의 데이터 자리에 뿌림(이때부터 화면이 동작)
특징
CSR은 웹페이지를 호출할 때 전체를 한번에 렌더링을 한다. 때문에 SSR보다 렌더링 부분이 많은 만큼 메인 화면의 로딩 속도가 느리다. 하지만 미리 모든 부분에 대해 렌더링을 끝마쳤기 때문에 다른 페이지로 이동할 때 추가적으로 로딩이 생기지 않는다.
사용자가 여러 페이지를 자주 이동하는 게 요구된다면 SSR보다 빠르게 사용이 가능하며, 이미 모든 요소를 불러왔기 때문에 더이상 추가로 호출하지 않아 서버에 부하도 덜 하다.
