[Coding] Why we use nuxt.js? — SEO: 1. SSR 편
# 개발자와 SEO (Search Engine Optimization)
많은 초기 사이트들은 SEO 작업에 많은 노력을 들입니다. 스타트업에서 ‘SEO’는 어디까지 포함되는 개념일까요? 흔히, 비 개발자의 경우는 SEO를 검색 키워드를 정리하는 정도로 생각하시는데요. 사실 SEO작업은 브랜딩부터 기술적인 배포방식까지 모든 영역을 포괄적으로 다루는 일을 말합니다.
이번 글에서는 SEO를 위해 개발자들이 고려해야 되는 부분과 그 실 사용예를 SEO를 위한 프레임워크 선택 / 도메인 연결 / 사이트 최적화 작업 세 파트로 나눠서 다뤄보겠습니다.
# 1. Why we use nuxt.js? — SEO SSR 편
— -
사이트를 제작하는 순간부터 우리는 SEO에 대해서 고민을 해야 합니다. 사이트를 어떠한 방식으로 제작하느냐에 따라 SEO의 결과가 좌우 되기 마련이죠.
이 번 BEAM ME와 Celebee, 그리고 블랙루비 회사홈페이지를 개편하면서 우리는 Nuxt.js라는 프레임워크를 사용했습니다.
여러분이 Vue.js 개발자라면 한번쯤 Nuxt.js에 대해 들어보셨을겁니다. Nuxt.js는 Vue.js를 서버에서 랜더링할 수 있게 해주는 프레임워크로 사실상 ”프레임 워크를 위한 프레임워크” 로 볼 수 있습니다.
그리고 한번씩 이러한 의문을 느껴보셨을 꺼라 생각합니다.
”왜 프레임 워크를 위한 프레임 워크를 사용해야 하죠?”
프레임워크를 위한 프레임워크를 사용한다는 것은 매우 비효율적으로 보일 수 있으나, 우리는 Nuxt.js가 SSR 방식을 지원한다는 점, 그리고 제작하는 사이트의 크기가 크지 않다고 판단해 Nuxt.js를 사용하기로 결정했습니다.
## SSR..?
— -
Nuxt.js를 선택한 가장 큰 이유는 SSR 방식을 사용한다는 점입니다. SSR은 무슨 방식인지, 왜 SSR방식을 택하게 되었는지를 알아보겠습니다.
사이트가 랜더링되는 방식은 크게 CSR과 SSR로 나뉩니다. 랜더링이란 웹페이지에 접속했을때, 그 페이지를 화면에 그려주는 것을 뜻합니다. CSR과 SSR은 각기 다른 방식으로 페이지를 화면에 그려줍니다.
1. CSR : Client Side Rendering
처음에 하나의 빈 페이지를 서버측에서 제공합니다. View에 대해서는 그림에서 볼 수 있듯이 클라이언트단에서 자바스크립트를 통해 랜더링을 하게 됩니다. 사용자는 페이지의 첫 로딩속도가 느리다고 느낄 수 있지만 한번 업로드 후 반응속도의 경우에는 SSR방식 보다 빠르기 때문에 좋은 사용자 경험을 줄 수 있죠.
2. SSR : Server Side Rendering
서버단에서 랜더링과정을 마친 후에 view를 보여주게 됩니다. html파일을 바로 읽어오기 때문에 사용자는 빠르게 페이지가 업로드 된다고 느낄 수 있습니다. 하지만, 자바스크립트 파일을 다운로드 하기 전까지는 사용자의 행동에 반응하지 않습니다. 또한 사용자의 요청이 있을때 마다 새로고침이 일어나게 됩니다.
쉽게 비유하자면 SSR 방식은 사고 싶은 물건이 있을 때 마다 슈퍼에 가서 장을 보는 방식입니다. CSR 방식은 슈퍼에서 많은 물건들을 잔뜩 사서 집에 쌓아두고 필요할때 쌓아둔 물건들을 꺼내 쓰는 방식입니다. 당연히 초기에는 SSR이 그 후에는 CSR이 빠르다는 느낌을 받겠죠?
>왜 SSR 방식이 SEO에 적합할까요?
많은 검색 봇들 (구글, 네이버 등)은 아직까지 javascript파일을 읽어드리지 못합니다. 랜더링된 html파일만 읽을 확률이 높다는 말이죠. 따라서 CSR 방식을 사용한다면 검색봇들이 사이트를 크롤링 할때 빈 html 파일을 긁을 확률이 높아 검색결과에 나타나지 않을 수 있습니다. 즉 컨텐츠가 없는 빈 사이트라고 판단할 확률이 높아진다는 것이죠. 따라서 초기 서비스를 런칭하고자 할때는 CSR방식이 적합하지 않을 수 있습니다.
SSR방식을 사용한다면 서버에서 랜더링된 초기 html페이지를 검색 봇들에게 제공하게 되므로 검색봇들이 사이트의 내용을 잘 파악하고 긁어 올 수 있습니다. 우리가 제공하고자 하는 컨텐츠가 있는 페이지로 판단하기 때문에 SEO에 많은 도움이 됩니다.
Nuxt.js는 SSR방식을 사용하여 검색 봇들이 사이트의 내용을 쉽게 읽을 수 있게 해줍니다. SEO에 있어서 큰 장점을 가지고 개발을 할 수 있다는 말이죠. 또한 사용자들이 페이지 업로드가 빠르다고 느낄 수 있으며 사용자의 요청이 많지 않은 사이트라면 SSR 방식을 사용하는 것이 좋다고 볼 수 있습니다.
앞서 말했듯, 이번 BEAM ME, Celebee, 그리고 블랙루비회사 홈페이지의 경우에는 사용자 요청이 많지 않으며 SEO에서 유리한 위치를 차지하고 싶었기에 Nuxt.js를 선택하게 되었습니다.
## Nuxt.js 나도 할 수 있을까?
— -
기존 Vue.js를 통해 개발을 진행하셨던 분이라면 Nuxt.js를 사용하는데 큰 무리가 없을 것입니다. 작동방식에 있어서 Vue.js와 큰 차이가 없고 Nuxt.js의 공식 문서만 보더라도 많은 부분에 있어 Vue.js의 문서를 참고하고 있습니다.
기존 Vue.js와의 몇 가지의 차이점은 물론 존재합니다.
1. 디렉토리 구조
디렉토리 구조에 있어서 가장 큰 차이점은 pages 폴더의 존재입니다. pages폴더는 어플리케이션의 뷰와 라우트를 포함하는 폴더입니다. Nuxt.js는 모든 .vue 파일을 읽고 애플리케이션의 라우터를 자동으로 생성합니다.
예를 들어, pages 폴더내에 mypage.vue라는 파일을 생성한다고 가정해봅시다. 기존 Vue.js는 라우터를 통해 경로를 설정해주어야 합니다. 하지만 Nuxt.js는 pages내의 mypage.vue를 인지하여 “/mypage”경로를 생성해줍니다.
vue.js의 <router-link>대신 <nuxt-link>태그를 사용하여 다음처럼 나타낼수 있습니다.
<nuxt-link to=”/mypage”>mypage</nuxt-link>
저는 이점이 Nuxt.js의 큰 강점중 하나라고 생각합니다.
2. 플러그인의 사용
Nuxt.js는 기존 Vue.js와 작동방식에 있어 약간의 차이가 존재하기 때문에 Vue.js의 플러그인을 바로 사용하기에 무리가 있습니다.
npm install — save beamme
beamme라는 Vue.js플러그인을 사용한다고 가정해보겠습니다. (물론 존재하지 않는 플러그인 입니다.)
Nuxt.js에서 다음과 같은 플러그인을 사용하기 위해서는 plugins폴더를 생성하고 플러그인의 설정파일을 생성해주어야 합니다.
[beamme.js]
```
import Vue from ‘vue’
import BeamMe from ‘beamme’
Vue.use(BeamMe)
```
그 다음 nuxt.config.js파일을 생성하고 다음과 같이 작성을 해주어야 합니다.
[nuxt.config.js]
```
module.exports = {
plugins: [‘~plugins/beamme’]
}
```
또한 많은 Vue.js의 플러그인의 경우 SSR방식에서 동작이 잘 안되는 경우가 많기 때문에 이 플러그인의 경우에는 SSR방식이 아닌 CSR방식을 사용하겠다고 선언을 해주어야 합니다.
[nuxt.config.js]
```
module.exports = {
plugins: [
{ src: ‘~plugins/beamme’, ssr:false }
]
}
```
ssr:false 부분이 보이시나요? 이제 플러그인 beamme의 경우에는 SSR방식을 사용하지 않게됩니다.
## 1편을 마치며
— -
많은 스타트업은 SEO에 있어서 기획자의 역량만이 중요하나는 착각을 하곤합니다. 하지만 SEO작업은 개발자와 기획자 모두 신경써야 하는 것이라고 생각합니다. 우리는 모두 같은 팀이니깐요?! 다음 편에서는 Nuxt.js로 작업한 사이트를 SEO의 관점에서 배포하고 도메인을 연결하는 과정에 대해 알아보겠습니다.
