CSR과 SSR이란?

해당 포스팅은 하단의 아티클을 재구성하여 만들었습니다.

 

클라이언트 사이드 렌더링과 서버 사이드 렌더링의 차이점

	클라이언트 사이드 렌더링	서버 사이드 렌더링
페이지의 내용을 그리는 곳	브라우저	서버
페이지 로딩	최초로 한 번 페이지 전체 로딩 -> 데이터만 변경하여 사용	페이지를 로딩할 때마다 서버로부터 리소스 전달 받음 -> 이를 해석하고 화면에 렌더링
사용자의 요청에 따라	필요한 부분만 읽음	새로고침이 일어남

 

클라이언트 사이드 렌더링

= Single Page Application(SPA)

SPA는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미한다. 기본적으로 페이지 로드가 없고, 모든 페이지는 단순히 HTML5 History에 의해 렌더링 될 뿐! 그래서 언제 새로운 데이터를 불러와야 할지 스스로 정해서 구현해야 한다.

전통적인 웹 대부분은 서버사이드 렌더링 방식이었다.

클라이언트 사이드 렌더링은 사용자의 행동에 따라 필요한 부분만 다시 읽어 들이기 때문에 서버 측에서 렌더링 하여 전체 페이지를 다시 읽어 들이는 것보다 빠른 인터렉션을 기대할 수 있다.

주소에 따라 다른 뷰를 렌더링 하는 것을 라우팅이라고 한다. React자체에는 이 기능이 내장되어있지 않기 때문에 라이브러리 react-router를 사용해서 설정해야 한다.

 

서버 사이드 렌더링

장점

서버 사이드 렌더링을 쓰는 목적은 크게 "검색 엔진 최적화"와 "빠른 페이지 렌더링"이다. 검색 엔진 최적화란 구글, 네이버와 같은 검색 사이트에서 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 최적화하는 기법. 특히, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌더링이 효율적이다.

서버 사이드 렌더링은 빈 HTML 페이지를 받아 브라우저에서 그리는 클라이언트 사이드 렌더링과 다르게 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있다. 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것이다.

 

ex. 카톡에서 url 링크 보내면 해당 페이지 미리 보기

단점

서버 사이드 렌더링은 Node.js 웹 애플리케이션 실행 방법을 알아야 하고 서버 쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요하다. 따라서, 프런트엔드 개발 입문자 입장에서는 쉽지 않은 진입 장벽이 존재한다.

요즘은 웹에서 제공되는 정보가 정말 많기 때문에 전통적인 방식은 성능 문제에 이슈를 낳았다. 요청 시마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문이다.

이것은 사용자와 인터랙션이 많은 요즘 웹앱에게 충분하지 않은 방법일 수 있다. 렌더링을 서버 쪽에서 하는 것은, 그만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽도 낭비되는 것이다.

서버 사이드 렌더링의 경우 컴포넌트가 최초로 생성되는 시점이 브라우저 위가 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없다. 대신 beforeMount나 mounted에서 window와 document를 접근할 수 있다.

 

 

Ref.

---

Server Side Rendering | Cracking Vue.js

Server Side Rendering | Cracking Vue.js

[주니어 탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)