Nuxt(Server Side Rendering) 배포와 통신

Minho Yoo·2023년 3월 9일

CSS JavaScript SSR framework front end html nuxt server side rendering spa vue 넉스트 뷰 서버 사이드 렌더링 싱글 페이지 어플리케이션 자바스크립트 프론트엔드

Vue.js

목록 보기

12/12

Nuxt 서비스 배포 방법

Nuxt.js 서비스를 배포하는 방법은 프로젝트를 생성할 때 선택한 Universal 모드의 배포 방식에 따라 다르다.
아래 2가지 유형에 따른 배포 방법을 살펴보자.

SSR(Server Side Rendering)

SSR 모드는 위 그림에서 Deployment Target을 Server(Node.js hosting) 으로 선택한 경우이다.
넉스트 설정 파일의 target 속성 값이 아래와 같이 server로 지정된다.

// nuxt.config.js
export default {
  target: 'server'
}

target 속성의 기본 값은 server 이기 때문에 설정 파일에 보이지 않더라도 괜찮다.

SSR 모드로 생성한 웹 서비스는 배포하려는 서버에 Node.js 서버를 실행할 수 있는 형태로 배포해야 한다.

SSG(Static Site Generation)

SSG 모드는 Deploment Target을 Static(Static/Jamstack hosting)을 선택한 경우이다.
넉스트 설정 파일의 target 속성 값은 static으로 지정된다.

// nuxt.config.js
export default {
  target: 'static'
}

SSG 모드는 사용자의 페이지 URL 요청이 들어올 때마다 서버에서 그려서 브라우저에 보내주는 SSR 모드와 다르게 웹 서비스를 구성하는 모든 페이지를 미리 그려야 하기 때문에 스태틱 서버에 배포하는 형태로 진행해야 한다.
Netlify 등의 CD(Continuous Delivery) 플랫폼을 이용하여 손쉽게 배포할 수 있다.

JAMStack이란 Javascript & API & Markup을 의미하며 API 서버 없이 사이트를 제작하는 방식을 의미한다.

페이지 메타 정보 설정

넉스트에서 페이지의 메타(meta) 태그 정보를 설정하는 방법에 대해 알아보겠다.

페이지 head 태그 설정

넉스트로 제작된 애플리케이션의 head 태그 값은 기본적으로 넉스트 설정 파일에 정의되어 있다.

// nuxt.config.js
export default {
  head: {
    title: 'learn-nuxt',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, inital-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

위 코드가 적용된 페이지는 브라우저에 그려졌을 때 다음과 같은 HTML 코드로 변환된다.

<html lang="en">
<head>
  <title>learn-nuxt</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<!-- ... -->

이 설정은 모든 페이지에 동일하게 적용된다.

페이지별 head 태그 설정

페이지별로 다른 head 태그를 설정하고 싶은 경우에는 각 페이지 컴포넌트에 아래와 같은 속성을 추가한다.

<!-- page/home.vue -->
<script>
export default {
  data() {
    return {
      str: 'hi'
    }
  },

  head: {
    title: '페이지 타이틀',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: '페이지 설명 내용',
      },
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  },
}
</script>

만약 컴포넌트에 정의되어 있는 뷰 인스턴스 데이터나 컴퓨티드 속성을 메타 태그에 값을 ㅗ 연결하고 싶다면 아래와 같이 함수 형태로 작성한다.

<!-- pages/products/_id.vue -->
<script>
export default {
  data() {
    return {
      productName: '바삭한 과자'
    }
  },

  head() {
    return {
      title: `상품 상세 페이지 - ${this.productName}`
    }
  },
}
</script>

기타 meta 태그 설정 방법에 대해서는 아래 문서를 참고하자.

Open Graph 태그 설정

OG(Open Graph) 태그란 특정 페이지의 링크를 SNS 상에서 공유할 때 해당 페이지의 정보가 잘 드러날 수 있도록 지원해 주는 메타 태그이다.

위와 같이 페이스북이나 카카오톡 등 SNS 상으로 특정 링크를 공유하면 해당 페이지의 title, description, image 등의 사이트 정보를 바로 확인할 수 있다.
앞에서 안내한 head 속성을 이용해 페이지 별로 다음과 같이 정의한다.

<script>
export default {
  head: {
    title: '상품 상세 페이지',
    meta: [
      {
        hid: 'og:title',
        property: 'og:title',
        content: '상품 상세 페이지'
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: '상품의 상세 정보를 확인해보세요'
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: 'http://placeimg.com/640/480/fashion'
      },
    ]
  }
}
</script>

OG 태그의 추가적인 속성들은 아래 공식 문서를 참고
Open Graph Protocol

Minho Yoo

Always happy coding 😊

이전 포스트

Nuxt (Server side rendering) 사용하기

1개의 댓글

Claire

2023년 6월 2일

안녕하세요, 혹시 상기 내용에서 "data-n-head=ssr"이 의미하는 바가 서버 사이드에서 렌더링된다는 의미가 맞을까요??

답글 달기