Prologue
기술스택에 Next.js가 있는 프론트엔드 개발자 모집 공고에는 무조건 CSR과 SSR의 차이점이 있다는 것을 분석하고, 이번에 개념을 다시 상기시킬 겸 따로 간단하게 정리를 하려고 한다.
이 기술을 사용하는 의미가 "남들이 사용해서"가 아닌, "사용할 만한 합당한 이유가 있어서"를 추구하기 위해서기도 하다.
잘못된 내용 제보 환영합니다.
1. CSR과 SSR의 개념 및 차이점
React는 기본적으로 빈 index.html 파일에 브라우저가 다운로드 받은 자바스크립트 코드를 가지고 동적으로 DOM을 생성하는 원리이다.
React로 개발된 웹 페이지를 접속하고 페이지를 그려내는 과정까지는 다음과 같다.
- 유저(브라우저)가 웹 서버로 웹 페이지 데이터(html)를 요청한다.
- 웹 서버는 요청을 확인하고 응답으로 웹 페이지 데이터를 제공한다.
- 웹 페이지는 제공되었지만, 빈 페이지만 노출이 된다.
- 메인 자바스크립트 코드를 실행한다.
- 코드가 실행되면서 동적으로 DOM이 브라우저에 렌더링 된다.
- 추가적으로 데이터가 변경 되면 이에 맞춰 리렌더링 한다.
예를 들어, 식당에서 음식을 주문하면 주문과 동시에 음식 조리를 시작하는 것과 비슷하다.
위와 같은 방식으로 웹 페이지를 렌더링 하는 방식을 CSR(Client-Side Rendering)이라고 한다.
반면, SSR을 채택하고 있는 React 프레임워크인 Next.js는 다음과 같이 웹 페이지를 그려낸다.
- 유저(브라우저)가 웹 서버로 웹 페이지 데이터(html)를 요청한다.
- 웹 서버는 요청을 확인하고, Next.js 서버에서 웹 페이지 렌더링을 진행한다. (pre-rendering)
- 브라우저는 pre-rendering이 완료된 파일을 제공받는다.
- 추가적으로 브라우저에서 자바스크립트 코드를 실행하여 상호작용이 가능하도록 만든다.
SSR의 예시로는, 식당에서 음식을 주문하면 조리된 음식을 바로 제공받는 것과 비슷하다.
위 방식을 서버에서 렌더링 한다 하여 SSR(Server-Side Rendering)이라고 한다.
두 방식의 차이점이라면, 대표적으로 웹 페이지의 렌더링 시점이다.
CSR은 요청을 보내고 응답을 받음과 동시에 브라우저에서 동적으로 자바스크립트를 실행하여 렌더링을 진행하고,
SSR은 요청을 보내면 웹 서버에서 이미 만들어진 HTML 파일을 제공 받는다.
2. CSR과 SSR의 장·단점
CSR과 SSR은 각각의 장단점이 있고, 각 장단점들은 상호보완 할 수 있다는 특징이 있는 것 같다.
대표적으로 CSR과 SSR의 장단점은 다음과 같다.
CSR의 장점
1. 서버 부하가 적다. 웹 서버는 정적 페이지만을 제공하기 때문에, 서버에서 렌더링 과정을 거치는 SSR과는 다르게 서버에 큰 무리가 가지 않는다.
2. 빠른 상호작용이 가능하다. SSR은 웹 서버가 직접 렌더링을 하여 완성된 HTML 코드를 제공하지만, 페이지가 이동함에 따라 새로운 HTML 파일을 요청해야 한다. 하지만 CSR은 정적 HTML 파일 내에서 필요한 부분만 새로고침 되기 때문에 SSR보다 빠른 상호작용이 가능하다.
CSR의 단점
1. 검색 엔진 최적화(SEO)가 어렵다. 검색 엔진은 정적 페이지에 제공된 데이터만으로 사이트를 분석하고 이를 검색 엔진에 등록하게 되는데, 필요시마다 동적으로 데이터를 그려내는 CSR은 검색 엔진에 많은 데이터를 제공하기가 어렵다.
2. 초기 로딩 속도가 느리다. 웹 서버에 처음 요청을 보낼 때부터 모든 페이지의 데이터를 한 번에 받아오기 때문에, 초기 로딩속도가 SSR보다 느리다.
SSR의 장점
1. 초기 로딩 속도가 빠르다. 모든 데이터를 받아오는 CSR과 다르게 SSR은 페이지에 필요한 데이터만 받아오기 때문에, CSR보다 더욱 빠른 초기 로딩 속도를 보여준다.
2. 검색 엔진 최적화(SEO)가 수월하다. 웹 서버로부터 거의 완성된 페이지를 제공받기 때문에, 정적인 상태의 페이지를 분석하는 검색 엔진으로부터 높은 최적화 점수를 받을 수 있다.
SSR의 단점
1. 서버의 부하가 증가한다. 클라이언트가 아닌 서버에서 렌더링을 진행함으로써 사용자가 매 페이지를 접속할 때마다 새로운 페이지를 렌더링 해야한다. 따라서 웹 서버의 의존도가 올라가고, 그만큼 서버에 대한 부하가 증가한다.
2. 초기 로딩 이후 페이지 이동 시 속도가 느리다. 초기 로딩은 빠르지만, 이후 페이지 이동이 있을 때마다 새로운 페이지를 요청받고 제공해야 하기 때문에 속도가 느려진다.
Epilogue
무엇이 좋다, 나쁘다를 판단하는 게 아닌 "어느 상황에서 적합하게 사용하느냐" 를 판단하는 게 제일 중요한 것 같다.
상대적으로 사용자와의 상호작용이 많은 서비스에서는 CSR이 적합할 수 있고, 검색 엔진 최적화나 데이터의 통행량이 많을 때는 SSR이 적합할 수 있다.
따라서, 프로젝트의 규모나 서비스 사용량에 따라 적재적소에 맞는 방식을 채택하여 개발을 진행해야 하는 것을 명심하자.
References