[Vue.js] SSR(서버사이드 렌더링) vs CSR(클라이언트사이드 렌더링) / SEO와 SPA

서버사이드 렌더링과 클라이언트사이드 렌더링 비교 / SSR CSR 비교 / SEO / 검색엔진최적화 / SPA / 싱글페이지어플리케이션 / Single Page Application

 

서버사이드 렌더링 (SSR)

- HTML을 만드는 곳이 서버다.
- 서버에서 페이지를 구현 후 클라이언트로 넘긴다.

장점

1. 초기 로딩 속도가 빠르다.
2. SEO가 CSR보다 유리하다.

단점

1. 페이지 변화 발생시 서버로 다시 렌더링을 요청해야한다.
2. 새로고침이 발생하여 UX적으로 좋지 않다.
3. 서버에 부담이 될 수 있다.

 

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

- HTML을 만드는 곳이 클라이언트이다.
- 각 사용자 (클라이언트)에게 책임을 맡기는 방식이다.
- 최초 접속시에 JS 코드가 포함된 전체 파일을 읽는다.
- 변화 발생 시 변화 부분만 변경하는 방식이다. (SPA)
- 기본적으로 vue.js는 CSR 방식이다.

장점 

1. 페이지 변화시 깜빡임이 없어서 부드러운 웹 사용이 가능하다.
2. data 요청있을때에만 서버에 요청을 하고, 페이지 변화가 있을 때에는 클라이언트에서만 처리하기 때문에 서버에 부담이 적다. 그래서 페이지 변화 속도도 빠르다.

단점

1. 첫봐면을 띄우는데 서버에서 전체 코드를 받아와야 하기 때문에 오래 걸린다.
2. SEO 측면에서 유리하지 않다. 하지만 구글은 CSR도 SEO 검색이 가능하도록 되어있다. (네이버에선 불가)

 

SEO란?

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

구글이나 네이버같은 검색엔진에서 검색 시 상단에 노출되도록 키워드등을 조절하는 것이다.
SEO 작업은 개발자에게 쉽지만, 사업자에게 매우 중요한 작업이다. 
SEO 작업이 잘되어있다면 검색엔진 사이트에 광고비를 주지 않아도 최상단에 노출되기 때문에 매출과 직접적인 관련이 있다.

SEO를 잘하는 방법은 사이트맵, robots.txt를 생성하거나 웹페이지마다 메타태그에 페이지에 대한 설명이 들어가있으면 좋다. 웹 페이지에 핵심 키워드가 존재해야한다. 

SSR로 개발시에 HTML에 대한 정보가 처음부터 담겨져 있기 때문에 데이터를 수집할 수 있지만,
CSR로 개발시에는 맨 처음 HTML 파일이 비어있기 때문에 크롤러가 테이터를 수집할 수 없어서 SEO 측면에서는 좋지 않은 개발방식이다. 하지만 구글에서는 CSR도 SEO를 지원해주고 있다. 네이버는 안된다.

 

SPA란?

Single Page Application

보여지는 페이지는 index.html 로 오직 하나이지만,
CSR 개발시에 컴포넌트나 jsp 등으로 페이지를 변화시킬 수 있다.
반대로 SSR은 페이지가 여러개인 MPA(Multi Page Application) 방식이다.

 

[Vue.js] 데이터 바인딩 : 단방향 & 양방향 개념과 사용방법