TIL SSR과 CSR 개념과 차이점

랜더링이란 ?

• 서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다

랜더링 과정

• 서버로부터 데이터를 응답받아 HTML을 Parsing 하여 DOM트리를 생성한다.
• DOM트리가 구축되는 동안 브라우저는 Render트리를 구축한다.
• CSS설정 및 위치를 설정한다.
• Render트리가 그려지고 브라우저 화면에 표시된다.

ssr과 csr 사진

 

SSR이란 ?

• 서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식.
• 참고로 웹 서버에 요청할 때마다 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식이다.

SSR 장점

• 검색엔진최적화(SEO) 가능
• 초기로딩속도가 빠름
  • 처음 렌더링된 HTML을 클라이언트에게 전달해주기 때문에 초기 로딩 속도를 줄일 수 있다. 또한 JavaScript파일을 불러오고 렌더링 작업이 완료되지 않아도 사용자가 콘텐츠를 이용할 수 있다.

SSR 단점

• 프로젝트 구조가 복잡해진다.
  • 단순 렌더링만 한다면 문제가 발생되진 않는다. 하지만, Redux, React Router 등 여러 라이브러리와 함께 연동하여 서버에서 데이터를 가져와 렌더링 하는 상황이 발생한다면, 프로젝트가 많이 복잡해질 수 있다.
• 매번 새로고침이 발생한다.
  • SSR은 서버에 요청할 때마다 새로고침이 발생한다. 매번 새로고침이 발생한다는 것은 서버와 잦은 응답을 한다는 의미이며 자연스럽게 서버에 부담을 주게 된다. 서버에 부담이 간다면 당연히 성능이 악화되기 마련이다

SEO란 ?

• Search Engine Optimization의 약어로 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 페이지를 구성하여 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 검색 결과가 상위에 나오게 된다면 방문 트래픽이 늘어난다. 때문에 인터넷 마케팅의 수단으로 이용되기도 한다.

CSR이란 ?

• CSR은 클라이언트 측에서 최초에 1번 서버에서 전체 페이지를 로딩하여 보여준다. 그 이후에는 사용자의 요청이 올 때마다, 자원(Resource)을 서버에서 제공한 후, 클라이언트가 해석하고 렌더링 하는 방식이다

CSR 장점

• 트래픽 감소와 빠른 인터랙션
  • SSR은 서버와 잦은 응답 때문에 자연스럽게 서버에 부담은 준다고 했다. 반면, CSR은 사용자의 행동에 따라 필요한 부분만 다시 읽어 들이기 때문에 서버 측에서 전체 페이지를 다시 읽어 들이는 것보다 빠른 인터랙션이 가능하다. 즉, 필요하고 변경된 데이터만 받아올 수 있다는 의미다. 물론 서버의 부담도 줄일 수 있다.

CSR 단점

• 초기 구동 속도가 느리다
  • SSR은 View를 서버에서 렌더링 하여 가져오기 때문에 초기 구동 속도가 빠르다고 했다. 하지만 CSR은 서버에서 View를 렌더링 하지 않는다. CSR은 HTML 다운, JavaScript 파일, 각 종 자원(Resource)을 다운로드한 후에 브라우저에서 렌더링을 하기 때문에 초기 구동 속도가 느리다.
• 보안 문제가 있다
  • SSR은 사용자 정보를 서버 측에서 세션으로 관리를 하지만, CSR은 쿠키 말고는 사용자 정보를 저장할 공간이 마땅치 않다.

 

그림 비교

SSR vs CSR 표 비교