[IT] SSR과 CSR의 차이점

프론트엔드 개념 중 많이 헷갈리는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)에 대해 알아보겠습니다.

 

SSR

• 일반적으로 MPA(Multi Page Application)에서 사용합니다. MPA는 각 페이지마다 파일이 존재하여, 페이지를 이동할 때마다 새로고침이 발생하는 방식입니다.
• 이미 렌더링된 HTML을 서버로부터 받아옵니다. 아래 사진을 보면, 개발자 도구에서 확인한 응답 결과인데 이미 정적 리소스가 렌더링된 것을 볼 수 있습니다. (이미지는 제외)

 

• JS는 그 다음에 다운로드합니다. HTML을 받아온 후와 JS를 받아오기 전 공백 시간은 사용자가 상호작용할 수 없는 껍데기만 있는 상태입니다. (하지만 보통은 매우 짧음)
• 상호작용은 할 수 없어도 이미 렌더링된 HTML을 빠르게 볼 수 있으므로, 사용자는 초기 로딩 속도가 빠르다고 느낍니다.
• 페이지를 이동할 때마다 서버로부터 리소스를 요청하므로 그 이후의 속도는 CSR에 비해 느립니다.
• 위와 같은 이유로 서버에 부하가 걸릴 가능성이 있습니다.
• 페이지를 이동할 때마다 새로운 리소스를 사용하므로 화면이 깜빡입니다.

 

CSR

• 일반적으로 SPA(Single Page Application)에서 사용합니다.
• 렌더링 되지 않은 빈 HTML을 받아옵니다. 위의 사진과 달리, 개발자 도구에서 보면 그냥 빈 하얀 화면만이 보입니다.
• JS가 다운로드 되면 그제서야 렌더링됩니다.
• SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리합니다. 빈 화면만 보이기 때문에 구글 등의 크롤링 봇이 페이지를 잘 서칭하지 못한다고 합니다.