SSR(Server Side Rendering)
서버에서 페이지를 그려서 브라우저로 보낸 후 화면에 표시하는 방법이다.
전통적인 웹 화면을 그리는 표현 방식 중 하나이다.
예를 들어 메뉴를 클릭했을 때 해당 페이지를 서버측에서 HTML화면을 그린 후 브라우저에게 던져주게 된다.
CSR(Client Side Rendering)
spa방식은 브라우저에서 빈 html를 던저준 후 자바스크립트 라이브러리가 실행이 되면서 비어있는 태그의 내용들을 채워져 나가며 화면에 DOM또는 UI요소를 그려나간다.
vue라우터를 이용해서 만든 페이지를 구성하는 방식이 vue cli를 활용한 SPA(Single Page Application)이다.
instance mounting:
vue instance를 생성되고 해당 인스턴스는 public의 index.html안에서 id app을 가진 태그가 부착 됨
vue는 hashCangeEvent를 기반으로 동작하고 있다. (hashCangeEvent는 뷰 라우터의 내부 동작 방식)
서버로 가지 않고 hashCangeEvent를 이용해서 화면을 그려주는 방식이다.
[가장 큰 차이점]
화면이 보여질 페이지 내용을 어디서 그리는 가?
SSR: 서버에서
CSR: 브라우저에서
[SSR을 사용하는 가장 큰 이유]
1. 빠른 페이지 렌더링: 서버에서 미리 그려서 브라우저에게 전달하기에 시간이 단축된다.
2. 검색 엔진 최적화(Search Engine Optimization): 사용자에게 많이 노출이 될 수 있다.
ex) OG(open graph) 태그 사용으로 웹 사이트에 대한 정보 설명을 더 상세히 표시해 줄 수 있다.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
SPA는 별도로 URL마다 SEO가 불가능하다.
SPA의 경우 html파일이 하나이기 때문에 검색엔진이나 사이트 정보에 대한 크롤러(Crawler)가 하나의 페이지에서만 크롤링을 해준다.
[SSR의 단점]
컴포넌트가 최초로 시작되는 시점이 브라우저가 아닌 Node.js환경이다.
(Node.js : javascript를 브라우저 밖에서도 실행하게 도와주는 환경)
그렇기때문에 node.js, 서버환경, 클라이언트, 서버빌드에 대한 이해가 필요하다.
그래서?
vue의 경우 서버사이드 렌더링 프레임워크인 nuxt.js를 사용하여 애플리케이션을 제작한다.
nuxt.js의 장점
1. 빠른페이지 로딩 속도와 성능 최적화를 시킬 수 있다.
2. SEO와 사이트 정보를 전달할 수 있다.
댓글