CSR과 SSR의 개념적 차이와 동작 방식

 

SSR은 Server Side Rendering의 약자로 서버에서 렌더링을 진행하는 방식이며, CSR은 Client Side Rendering의 약자로 브라우저에서 렌더링을 진행하는 방식이다.

 

 

 

SSR(Server Side Rendering)의 동작 방식

페이지를 이동할 때마다 서버에 요청을 하는 방식을 서버 사이드 렌더링이라고 한다.

SSR 방식은 서버에서 렌더링하여 완전하게 만들어진 HTML 파일을 브라우저로 전달하여 렌더링하는 방식이다. 새로운 페이지로 이동할 때마다 서버에 페이지를 요청하기 때문에 새로고침이 되어 깜빡이는 현상이 발생한다.

 

장점

• CSR에 비해 다운 받는 파일이 많지 않아 초기 로딩 속도가 빠르기 때문에 사용자가 검색등을 했을때 빠른 피드백을 받을 수 있다. 
• HTML에 대한 정보가 처음부터 포함되어 있어서 모든 검색엔진에 대한 SEO(검색 엔진 최적화)가 가능하다.

단점

• 매번 페이지를 요청할 때마다 새로고침 되기에, 새로고침 될때마다 깜빡이는 현상 등 UX가 다소 떨어질 수 있다.
• 페이지를 이동할 때마다 매번 서버에 요청을 하기 때문에 서버의 부담이 있다.

 

CSR(Client Side Rendering)의 동작 방식

최초 로딩 시 브라우저가 서버에 HTML을 비롯한 CSS, JavaScript 등 각종 리소스들을 받아오는 방식이 클라이언트 사이드 렌더링 방식이다. 각종 리소스들을 서버에서 받아오면 사용자의 상호작용에 따라 JavaScript를 통해 동적으로 렌더링하고 이후 필요에 따라 데이터를 서버에 요청해서 받아오게 된다.

장점

• 초기 요청을 제외하고는 SSR에 비해 빠른 페이지 전환 속도로 더 나은 UX를 제공한다.
• 서버에 요청하는 횟수가 적기 때문에 서버 부담이 SSR에 비해 적다.

단점

• 최초 로딩시 모든 리소스들을 받아와야 하기 때문에 초기 로딩 속도가 느리다.
• 처음에는 HTML이 비어있어 크롤러가 데이터를 수집할 수 없기 때문에 SEO(검색 엔진 최적화) 문제가 발생한다.
• 쿠키나 localStorage에서 사용자에 대한 정보를 저장해야 하기 때문에 XSS 공격에 취약하다.

 

 

React 환경에서는 CSR의 단점을 극복하기 위해 React SSR 라이브러리인 Next.js를 사용한다.

 

여기서 잠깐! Next.js는 뭐지?

다음엔 Next.js에 대해 알아보아야겠다!

 

참고:https://bbbyung2.tistory.com/65