SeouliteLab

[Vue.js] Vue 3의 createSSRApp() 메서드 이해하기 본문

카테고리 없음

[Vue.js] Vue 3의 createSSRApp() 메서드 이해하기

Seoulite Lab 2024. 4. 25. 08:05

Vue.js 3에서는 서버 측 렌더링을 위한 createSSRApp() 메서드를 제공합니다. 이 메서드는 서버 측 렌더링(SSR)을 구현할 때 사용됩니다. 이를 자세히 알아보겠습니다.

createSSRApp() 메서드란?

createSSRApp() 메서드는 Vue 애플리케이션을 서버 측 렌더링(SSR)할 때 사용됩니다. Vue 3에서는 서버 측 렌더링을 더욱 쉽게 구현할 수 있도록 이 메서드를 도입하였습니다.

예제

아래는 createSSRApp() 메서드를 사용하여 간단한 서버 측 렌더링 애플리케이션을 생성하는 예제입니다.

// 서버 측 렌더링 애플리케이션 생성
const { createSSRApp } = require('vue');
const express = require('express');
const { renderToString } = require('@vue/server-renderer');

const app = express();

// Vue 애플리케이션 생성
const vueApp = createSSRApp({
  data() {
    return {
      message: '안녕하세요, Vue SSR!'
    }
  },
  template: `<div>{{ message }}</div>`
});

// 라우트 핸들러
app.get('/', async (req, res) => {
  const appContent = await renderToString(vueApp);
  res.send(`
    <html>
      <head>
        <title>Vue SSR 앱</title>
      </head>
      <body>
        <div id="app">${appContent}</div>
      </body>
    </html>
  `);
});

// 서버 시작
app.listen(3000, () => {
  console.log('서버가 3000 포트에서 실행 중입니다.');
});

위 예제에서는 다음과 같은 작업을 수행합니다.

  1. createSSRApp() 메서드를 사용하여 Vue 서버 측 렌더링 애플리케이션을 생성합니다.
  2. Express를 사용하여 서버를 설정합니다.
  3. 라우트 핸들러를 정의하여 서버 측 렌더링을 수행합니다.
  4. renderToString() 함수를 사용하여 Vue 애플리케이션을 문자열로 렌더링합니다.
저작자표시 비영리 변경금지