데브코스 최종 프로젝트에서 Next.js를 통해 SSR을 도입했다 !
물 론 프로젝트 전에 공식문서도 읽고 나름 열심히 공부를 했지만😂
SSR / CSR의 개념과 차이점, 장단점을 잘 모르니 프로젝트 기간에도, 리팩토링 중인 지금도 난항을 겪는 중이다 ,,,
그래서 이번 포스트에서는 SSR과 CSR의 개념과 차이점에 대해서 정리를 해보고
다음 포스트에서는 Next.js를 정리 해보려고 한다 !
💡 SSR 이란?
Server Side Rendering 의 약자로
서버 측에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
위 사진은 SSR을 과정을 그림으로 나타낸 사진이다.
-
유저가 웹사이트에 요청을 보낸다.
-
서버는 즉시 렌더링 가능한 HTML파일을 만든다.
-
클라이언트에 전달되는 순간, HTML은 이미 렌더링 준비가 되어있기 때문에 즉시 렌더링 된다.
사용자는 렌더링 된 내용을 볼 수 있지만 상호작용을 할 수는 없다 !
(왜냐? Javascript를 읽기 전이기 때문) -
브라우저는 Javascript를 다운로드한다.
-
Javascript를 다운받는 동안 사용자는 사이트를 볼 수 있지만 상호작용은 불가능하다. 이때 사용자의 동작을 기억해둔다!
-
브라우저는 Javascript 프레임워크를 실행시킨다.
-
Javascript가 성공적으로 컴파일 되었기 때문에 기억해둔 사용자 동작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.
💡 CSR 이란?
Client Side Rendering 의 약자로
사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식.
말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
위 사진은 CSR을 과정을 그림으로 나타낸 사진이다.
-
유저가 웹사이트에 요청을 보낸다.
-
CDN이 HTML 파일과 Javascript로 접근할 수 있는 링크를 클라이언트로 보낸다.
-
클라이언트는 HTML과 Javascript를 다운로드 받는다.
(이때 유저는 아무것도 볼 수 없다.) -
브라우저는 Javascript를 다운받는다.
-
다운이 완료된 Javascript가 실행된다. 데이터를 위한 API가 호출된다.
(이때 유저들은 placeholder를 보게된다. ) -
서버가 API로부터의 요청에 응답한다.
-
API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.
💡 SSR과 CSR의 차이
-
페이지 첫 로딩 시간
먼저, SSR은 서버에서 렌더링에 필수적인 요소를 먼저 가져오기 때문에 초기 로딩 속도가 CSR 보다 더 빠르다.
CSR은 모든 리소스(HTML, CSS, 스크립트)를 한 번에 불러오기 때문에 초기 로딩 속도가 좀 느리다. -
이후 로딩 시간
첫 페이지 이후 다른 페이지로 이동한다고 가정하면, SSR은 첫 페이지를 로딩한 과정을 동일하게 한 번 더 수행한다. 반면 CSR은 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다. -
SEO(검색 엔진 최적화)
SSR은 모든 데이터가 이미 HTML에 담겨진 채로 브라우저에 전달되기 때문에 검색 엔진 최적화에 유리하다.
반면, CSR은 자바스크립트를 사용하여 사용자와 상호작용 후에 페이지 내용을 로드하기 때문에 웹 크롤러가 페이지를 색인화 하려고 하면 빈 페이지 처럼 보이게 된다. 따라서 SEO에 불리하다 !
(구글의 크롤러는 JS를 실행할 줄 안다고 한다 ㅎㅎ 하지만 완벽한 단계가 아니기 때문에 구글 측에서도 원활한 크롤링을 위해 SSR을 고려하라는 말을 하고 있따.) -
서버 자원 사용
CSR은 클라이언트가 서버의 일을 나눠서 하기 때문에 서버의 부하가 적다.
반면, SSR은 매번 서버에 요청을 하기 때문에 서버 부하가 비교적 크다.
💡 언제, 무엇을 사용해야 하나요?
SSR을 사용하자 !
- 상위 노출을 위해 SEO가 필요할 때
- 네트워크가 느릴 때
- 초기 로딩 속도가 빨라야하는 사이트를 개발할 때
- 웹 사이트의 상호작용이 적을 때
CSR을 사용하자 !
- SEO를 통한 상위 노출보다 고객의 데이터 보호가 중요할 때
- 네트워크가 빠를 때
- 보다 나은 사용자 경험을 제공하고 싶을 때
- 웹 사이트의 상호작용이 많을 때
💡 참고자료
