nuxt로 SSR 웹 앱 배포하기

안녕하세요.

nuxt.js를 이용한 SSR 웹 앱에 대해서 알아보려고 합니다.

nuxt.js?

nuxt.js는 vue.js 프레임워크 기반의 개발환경 구축용 프레임워크 입니다.

nuxt.js에는 크게 아래와 같은 기능들을 탑재하고 있습니다.

• Vue Router
• Vuex
• Vue Server Renderer
• vue-meta
• vue-loader
• babel-loader
• Webpack

이 중에서 우리가 유심히 보아야 할 부분은 Vue Server Renderer 입니다.

해당 기능이 우리가 SSR 서비스를 만들 수 있게 해주기 때문입니다.

SSR?

SSR은 Server Side Rendering의 약자입니다.

보통 vue나 react에서는 Client Side Rendering 즉, 웹 브라우저에서 동적으로 렌더링 되는 구조입니다. 다만 이럴 경우는 몇 가지 문제점이 있습니다.

1. 초기 loading 시 다운 받을 데이터 양이 많기에 초기 loading 속도가 느림
2. 대부분 웹 크롤러는 js인식을 못하기에 SEO가 어려움
3. front-end 소스가 노출되어있음

위와 같은 문제점 때문에 CSR 대신 SSR 기법을 이용하거나 병행하는 웹 앱개발이 필요한 경우가 종종 있습니다.

사실 SSR이 최신 기술인 것은 아닙니다.

spring 개발자의 경우 thymeleaf, node개발자의 경우 ejs 등이 SSR의 한 형태라고 볼 수 있습니다.

다만 기존의 SSR 프레임워크의 경우 아래와 같은 단점이 있었습니다.

1. 페이지 이동 시 화면 깜빡임
2. 렌더링에 따른 서버 부하

위와 같은 단점을 해결하기 위해 nuxt.js에서는 아래와 같이 단점을 보완하는 구조입니다.

1. Universal rendering을 통해 깜빡이지 않고 reload구현
2. 페이지 캐싱을 통해 dynamic rendering 최소화

그럼 이제 demo 페이지를 만들어 보도록 합시다!

Hello World!

아래 명령어를 입력하면 됩니다.

$ npm init nuxt-app <project name>

아래와 같이 마음에 드는 설정으로 진행하시면 됩니다.

단, Rendering mode는 꼭 Universal 로 해야 합니다.

아래와 같이 설정이 끝나면 yarn dev를 입력해 실행 해 보도록 합시다.

아래와 같이 build를 하고 나면

아래와 같이 demo 페이지를 볼 수 있습니다.

마치면서

저는 보통 SSR 부분과 CSR부분을 필요에 따라 적절히 사용 하는 편 입니다.

예컨데, 소개페이지나 고객 게시판 같이 간단한 커뮤니티 페이지 같이 rendering이 무겁지 않거나 많은 사람이 사용하지 않는 페이지는 SSR로, dashboard 페이지나 웹 서비스의 핵심 기능 페이지 같이 무겁거나 많은 사람이 이용할 것으로 예상 되는 페이지의 경우에는 CSR을 사용합니다.

꼭 특정 기술이 정답인 것은 아닙니다. 정확히 이해하고 적재적소에 사용하는 것이 best라고 생각합니다.