[javascript] Vue Router와 서버 사이드 렌더링

18 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 구축하기 위한 프레임워크이며, Vue Router는 앱의 URL을 기반으로 한 페이지 네비게이션 및 상태 관리를 제공하는 라이브러리입니다. 이러한 기술은 일반적으로 클라이언트 측 라우팅을 처리하고, 서버 사이드 렌더링(SRR)은 서버에서 페이지를 렌더링하여 초기 로드 속도를 높이는 데 사용됩니다.

Vue Router

Vue Router는 단일 페이지 애플리케이션(SPA)을 개발할 때 유용하며, 브라우저의 네이티브 라우팅 기능을 이용하여 페이지를 업데이트합니다. Vue Router를 사용하면 URL에 따라 컴포넌트를 동적으로 로드하고, 임의의 URL을 처리할 수 있는 기능을 제공합니다.

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

서버 사이드 렌더링

서버 사이드 렌더링은 초기 페이지 로딩 시간을 줄이고 SEO를 개선하는 데 도움이 됩니다. Vue.js 는 vue-server-renderer 모듈을 사용하여 서버 측에서 Vue 컴포넌트를 렌더링 할 수 있습니다.

예를 들어, Node.js 서버에서 Express 프레임워크를 이용하여 Vue 앱을 서버 측 렌더링할 수 있습니다.

// server.js
const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
const template = require('fs').readFileSync('./index.html', 'utf-8')

const app = express()

app.get('*', (req, res) => {
  const renderer = createBundleRenderer(serverBundle, {
    runInNewContext: false,
    template,
    clientManifest
  })

  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.url) {
        res.redirect(err.url)
      } else if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    } else {
      res.end(html)
    }
  })
})

app.listen(3000)

Vue Router와 서버 사이드 렌더링을 함께 사용하려면 Vue 애플리케이션을 서버 측에서 렌더링하고, 동적 라우팅을 처리할 수 있는 기능을 구현해야 합니다. 이를 통해 초기 로드 속도를 높이고 SEO를 개선할 수 있습니다.

더 자세한 내용은 Vue Router 공식 문서 및 Vue 서버 사이드 렌더링 가이드를 참고하시기 바랍니다.