비교목적
각 렌더링 방식이 어떤 장점이 있고 단점이 있는지 비교하고, 어떤 상황에서 사용하면 좋을지 고민해본다.
SSR
특징
서버 사이드 렌더링으로 보여줄 화면을 서버에서 HTML을 구성, 동적으로 조정할수 있는 JS파일도 함께 클라이언트로 보내줌
서버에서 데이터를 미리 다 준비하기 때문에 null 값이 없음
장점
- CSR보다 페이지로딩이 빨라짐
- SEO 최적화
단점
- 화면 깜빡임 이슈로 사용성 저하(SSG와 같은 문제)
- 사용자가 많아지면 서버에 부담이 감
- 사용자가 화면을 빨리 볼 수는 있지만 동적으로 제어하는 JS파일을 받지 못해서 사용자가 액션을 취했을 때 인터렉션이 안되는 경우가 발생(반응을 안하는 경우가 발생, TTV와 TTI에 시간 차이가 발생함)
고려할 점
- TTV와 TTI의 시간 단차를 어떻게 줄일 수 있을지
사용예
- 인터렉티브가 적은 정적인 화면에 사용
- Next.js(요즘에는 SSG도 지원)
CSR
특징
클라이언트 사이드 렌더링으로 초기 index.html파일 이외에 js 파일로 화면을 구성함
보통 id root만 들어있음
처음에 접속하면 빈 화면만 나오고 링크된 자바스크립트를 서버로부터 받아오는데, 프레임워크 라이브러리 소스코드들이 다 포함이 되어 있는 것이라 사이즈가 커 다운로드 받는데 시간이 소요
업데이트 되는 화면만 렌더링함.
장점
- 깜빡임 이슈 해결로 사용성 증가
단점
- 사용자가 첫 화면을 보기까지 시간이 오래 걸림
- SEO 떨어짐
고려할 점
- js 단위를 최소 단위로 쪼개어 필요한 파일만 보낼 수 있게 해 서버의 부담을 줄이도록 해야함
사용예
- React에서 사용하는 렌더링
SSG
특징
스태틱 사이트 제너레이션
React+Gatsby
Next.js도 지원하고 있음.
- CSR로 최적화 되어있는 React 웹 어플리케이션을 정적으로 웹페이지를 생성을 미리 해두어서 서버에 배포
- 이렇게 만들어진 웹사이트는 모두 정적인것이 아니라 동적으로 처리해야 할 파일이 있는 부분은 JS 파일로 가져와 동적으로 동작하게 함
- 페이지가 정적으로 제공되기 때문에 CSR SEO문제 보완
- CSR과 SSR의 단점을 보완한 렌더링 형식
Static Site
가장 근본
서버에 이미 잘 만들어진 html 문서들이 있고 사용자가 브라우저에서 주소에 접속하면 서버에 이미 배포되어있는 HTML문서를 받아와서 보여줌.
단점
- 다른 페이지에 접속하면 페이지 전체가 다시 불러와지기 때문에 블링킹이슈가 있음
- 사용성이 떨어짐
사용예
약관이나 변하지 않는 내용이 있는 페이지에서 사용하면 좋음
참고자료
멋진 프론트엔드 개발자를 위하여!