[Vue.js] Nuxt - SPA vs SSR

개요

CSR(Client Side Rendering)

SPA는 CSR (Client Side Rendering)의 종류 중 하나로,

웹페이지를 요청하면, 서버에서 각 파일들이 클라이언트로 전송돼 클라이언트에서 렌더링된다.

SPA에서는 페이지 이동을 두가지 방식(해쉬모드, 히스토리모드)이 있다.

해쉬모드를 예로 들면, 주소의 도메인과 하위 주소를 #(해쉬 태그)로 구분한다.

따라서 # 이하의 주소가 바뀌더라도 서버에 데이터 요청을 하지 않게 된다.

히스토리모드는 #을 사용하지 않아, 도메인 이하 주소가 바뀌면 브라우저에서 서버로 새 페이지를 요청한다.

그래서 미리 서버에 메인 페이지로만 응답을 하게 설정해주어야 한다.

 

결론적으로, SPA는 최초 페이지 로딩 이후로는 서버와의 통신이 이루어지지 않는다.

그래서 발생하는 필연적인 단점으로는, 검색엔진을 통해 외부에서 검색이 어렵다는 점이 있다.

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

웹사이트가 검색 결과에 더 잘 보이도록 최적화 하는 과정을 의미한다.

예를 들어, 웹 페이지의 링크를 카카오톡 등 다른 곳에 붙여넣게 되면 뜨는 부가 설명들이 있다.

이런식으로 링크 밑에 카드 형식으로 링크에 대한 부가설명이 뜬다.

이런 정보는 웹페이지를 직접 렌더링 하지 않고 <meta> 태그의 메타데이터를 가져와서 표시한다.

그런데 SPA는 CSR이므로, 외부 검색엔진에서는 메타 데이터가 없으면 내부의 내용을 알 수 없다.

SSR(Server Side Rendering)을 하게 되면 서버에서 렌더링을 하므로 메타데이터를 자동생성하고,

그로 인해서 검색엔진에서 바로 웹페이지의 내용을 표시할 수 있다.

Open Graph Protocol

웹 페이지의 메타 데이터를 사용해 페이지 콘텐츠 표시를 표준화 하기 위한 인터넷 프로토콜.

참조) The Open Graph protocol (ogp.me)

Open Graph protocol

위와 같이 og: 태그를 통해 동적으로 메타 데이터를 생성할 수 있다.

적용

/index.html에 다음과 같이 메타데이터를 생성해보자

메타데이터가 출력되긴 한다.

그러나 movie페이지를 붙여넣어도 동일한 결과가 출력된다.

이것이 SPA에 SEO를 적용하기 어려운 이유다.

Nuxt

기존 Netlify는 컨텐츠를 단순 저장하고 그것을 제공하는 방식이라 서버 사이드의 로직이 동작할 수 없다.

그래서 따로 서버리스 함수를 제공하여 외부와의 통신을 제공했었다.

그러나 SSR을 제공할 때는 Netlify에서 제공할 수 없다.

따라서 Heroku라는 사이트를 이용한다.

Heroku에서는 Nuxt.js를 지원하므로 기존에 만들었던 프로젝트를 Nuxt.js로 이관하여 게시해주면 된다.