Vue.js) Nuxt.js 란 무엇인가

작년 6월에 어떠한 계기(?)로 급하게 이직 준비를 하고 8월에 새로운 회사로 이직했다. 그동안 배우고 활용했던 React 개발자를 채용하는 자리였기 때문에 순탄하게 이직할 수 있었던 것 같은데 신기하게도 업무는 vue.js로만 하게 되었다. 그래서 불만이라기 보다는 새로운 걸 배워서 오히려 좋아~ 상태이다, 바쁘기도 하고 급하게 이직하면서 쉬지 않고 달리는 기분이었는데 새 직장 6개월차인 지금은 많이 적응을 해서 요즘에는 김영하 작가의 낭독회 영상들을 보며 글쓰기에 다시 흥미가 생겼다. 주절주절 말이 많지만 이번 글은 나의 사수님이 요새 공부를 해야한다고 자극을 준 Nust.js라는걸 월말 오프가 된 기념으로 좀 찾아보면서 정리하려고 쓰는 것이다. 박찬호된 기분. 

 

---

Nust.js란 무엇인가

React 에는 화력이 조금 밀리고 있긴 하지만 여전히 인기 있는 프레임워크인 vue.js 의 Server-side rendering(이하 SSR)을 지원하기 위한 프레임워크이다. Nust.js에는 웹 애플리케이션을 개발할 때 필요한 vue-router, axios 등과 같은 필수 라이브러리를 미리 구성하여 Single Page Application(SPA)를 쉽게 개발할 수 있다. 

 

TIP! CSR? SSR?

SSR을 지원하는 프레임워크라고 하는데 SSR이란 무엇이냐,

CSR (Client Side Rendering)

보통 SSR을 설명할 때 CSR과 비교하여 설명한다. CSR이란 Client Side Rendering의 약자로, 랜더링이 클라이언트 쪽에서 일어나는 것이다. 즉, 사용자가 웹 페이지에 접근하면 서버는 데이터를 제외한 화면을 그리는 HTML, JS 코드들을 클라이언트에 보내주고 클라이언트를 이것을 받아 화면을 그린다.

• React나 Vue가 CSR 방식으로 랜더링된다.
• CSR은 웹 페이지를 구성하는 모든 HTML, CSS, JS 파일을 첫 페이지 접근시 한번에 다 불러오기 때문에 초기 구동이 느리다는 단점이 있지만 그 이후에는 다른 페이지로 전환되는 시간이 빠르다. 
• CSR의 최대 단점! SEO 최적화가 어렵다. 검색 엔진은 크롤러로 웹 사이트를 읽어서 검색 결과를 만들어내는데 CSR은 사실 데이터가 없는 빈 페이지에 사용자의 상호작용으로 동적으로 데이터를 가져와서 보여주기 때문에 크롤러에 걸리는 정보가 없다. 그래서 검색 결과에 많이 노출되어야 하는 웹의 경우 CSR로 개발하는 것은 부적절하다.

SSR (Server Side Rendering)

SSR은 말 그대로 서버쪽에서 랜더링을 한다는 뜻이다. 서버에서 랜더링하라고 보내주는 HTML 파일에 이미 필요한 내용(데이터)들이 모두 채워져 있는 상태이다. 그래서 사용자가 페이지에 접근하자마자 데이터가 있는 페이지를 바로 보여준다. 그러나 랜더링이 완료된 다음에 클라이언트가 JS 파일을 다운받기 때문에 그 HTML 파일이 랜더링 되는 동안에는 사용자와 상호작용을 할 수 없다. 

• SSR은 CSR가 달리 이미 서버에서 내용이 채워진 상태로 클라이언트에 넘어오기 때문에 크롤러가 이 데이터에 접근할 수 있어 SEO 최적화에 유리하다. 
• 첫 페이지 접근시 모든 파일을 다 다운받은 CSR과 달리 해당 페이지에 필요한 파일만 가져오기 때문에 초기 페이지 로딩 시간은 SSR이 더 빠르다. 대신 다른 페이지로 이동하면 첫 페이지 구동 시간만큼 또 걸리기 때문에 사용자 상호작용이 많은 경우에는 CSR이 더 적절하다. 

 

 

continue....