Nuxt.js와 Express.js를 활용한 강력한 서버사이드 렌더링(SSR) 개발 가이드

Nuxt.js는 Vue.js 기반의 유연하고 강력한 SSR 프레임워크입니다. 하지만 때로는 더욱 복잡한 백엔드 로직이나 커스텀 서버 설정이 필요할 때가 있습니다. 이러한 경우 Express.js를 Nuxt.js와 함께 활용하면 효과적인 해결책이 될 수 있습니다.

본 가이드에서는 Nuxt.js 프로젝트에 Express.js를 통합하여 API 서버를 구축하고, SSR을 더욱 유연하게 관리하는 방법을 자세히 알아보겠습니다.

1. Nuxt.js 프로젝트 생성 및 설정

먼저 새로운 Nuxt.js 프로젝트를 생성하고 필요한 패키지를 설치합니다.

npx create-nuxt-app my-nuxt-app
cd my-nuxt-app
npm install express

2. Express 서버 구현

server 디렉토리에 index.js 파일을 생성하고 다음과 같이 Express 서버를 구현합니다.

const express = require('express');
const { loadNuxt, build } = require('nuxt');

const isDev = process.env.NODE_ENV !== 'production';
const app = express();

async function start() {
  const nuxt = await loadNuxt(isDev ? 'dev' : 'start');

  if (isDev) {
    await build(nuxt);
  }

  // API 라우트 정의
  app.get('/api/hello', (req, res) => {
    res.json({ message: 'Hello from Express API!' });
  });

  // Nuxt 미들웨어 등록
  app.use(nuxt.render);

  app.listen(3000, () => {
    console.log('Server listening on http://localhost:3000');
  });
}

start();

• loadNuxt: Nuxt 인스턴스를 로드합니다.
• build: 개발 모드에서 Nuxt를 빌드합니다.
• /api/hello 라우트: 간단한 API 예시입니다. 실제 프로젝트에서는 더 복잡한 로직을 구현할 수 있습니다.
• nuxt.render: Nuxt 미들웨어를 등록하여 Nuxt 애플리케이션을 렌더링합니다.

3. package.json 스크립트 설정

package.json의 scripts 섹션을 다음과 같이 수정하여 개발 및 프로덕션 환경에서 서버를 실행할 수 있도록 설정합니다.

"scripts": {
  "dev": "node server/index.js",
  "build": "nuxt build",
  "start": "NODE_ENV=production node server/index.js"
}

728x90

4. 프론트엔드에서 API 호출

Vue 컴포넌트에서 fetch API를 사용하여 Express API를 호출할 수 있습니다.

<template>
  <div>
    <h1>Nuxt + Express</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('');

onMounted(async () => {
  const res = await fetch('/api/hello');
  const data = await res.json();
  message.value = data.message;
});
</script>

5. 서버 실행 및 확인

npm run dev

이제 브라우저에서 http://localhost:3000/api/hello로 접속하면 Express API가 응답하는 JSON 데이터를 확인할 수 있습니다.

왜 Nuxt.js와 Express.js를 함께 사용해야 할까요?

• 유연한 백엔드 커스터마이징: Express.js를 사용하여 Nuxt.js가 제공하지 않는 기능이나 복잡한 로직을 구현할 수 있습니다.
• API 서버 통합: Nuxt.js 애플리케이션 내에서 API 서버를 구축하여 데이터를 효율적으로 관리할 수 있습니다.
• SSR 최적화: Express.js를 통해 SSR을 더욱 세밀하게 제어하고 성능을 향상시킬 수 있습니다.
• 다양한 미들웨어 활용: Express.js의 풍부한 미들웨어 생태계를 활용하여 인증, 데이터베이스 연결, 로그 등 다양한 기능을 구현할 수 있습니다.

728x90

Nuxt.js와 Express.js를 함께 사용하면 더욱 강력하고 유연한 SSR 애플리케이션을 개발할 수 있습니다. 본 가이드를 통해 Nuxt.js 프로젝트에 Express.js를 통합하는 방법을 익혔으니, 이를 바탕으로 다양한 프로젝트에 적용해 보세요.