서버 사이드 렌더링, 클라이언트 사이드 렌더링

렌더링

웹 페이지 접속 시, 그 내용을 브라우저 화면에 표시하는 것

 

서버 사이드 렌더링(SSR)

요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식

(서버 측에서 HTML, View를 생성하여 응답하는 방식)

 

- View를 서버에서 렌더링 하여 가져오기 때문에 첫 로딩이 매우 짧음

- 인터랙션(상호작용) 바로 가능하지 않음(view만 가져온 상태, 자바스크립트까지 모두 적용된 상태는 아니므로)

- View 변경할 때마다 서버에 계속 요청하게 되므로 서버에 부담이 커짐 

- 검색 엔진 최적화에 유리

 

클라이언트 사이드 렌더링(CSR)

처음에 하나의 페이지만 서버에서 제공하고, View에 대해서는 클라이언트에서 자바스크립트를 통해 렌더링 하는 방식

(클라이언트 측에서 View 생성하는 방식)

 

- View를 서버에서 렌더링 하지 않고 빈 HTML 다운 후에 자바스크립트 읽어 들이고 화면을 그리는 시간까지 마친 후에 브라우저에 보여주기 때문에 SSR에 비해 초기 로딩 시간이 오래 걸림

- 인터랙션(상호작용) 바로 가능(view가 나타난 시점엔 자바스크립트까지 모두 적용된 상태이므로)

- 초기 로딩 이후에는 서버에 다시 요청할 필요 없이 클라이언트 내에서 작업이 이루어지므로 처리가 빠름

- 검색 엔진 최적화에 불리

 

 

검색 엔진 최적화(Search Engine Optimization)

웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업

 

웹 페이지와 관련된 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 중의 하나이며 비용 처리 없는 마케팅이라고 할 수 있다.

 

기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다. 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹사이트에 얼마나 인용되었나를 사용하기 때문에 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화한다.

 

클라이언트 사이드 렌더링으로 이루어진 사이트는 HTML의 내용이 비어있기 때문에 제대로 된 데이터를 수집할 수 없게 되는 문제점이 나타나게 된다.