이 기사의 대상자

Vue의 기초를 이해하는 분

Nuxt의 기초를 이해하는 분

HeadlessCMS에 관심이 있다면

사용할 아키텍처

Nuxt.js

Prismic.io

Why!? Nuxt.js

우선 블로그에서 가장 중요한 것입니다만・・・
Nuxt는 SSR에 대응하고 있기 때문에 SEO에 강하다! ! !
SPA에서도 SEO 갈 수 있을까요? ? ?
여러 설이 있지만 갈 수 있다고 생각합니다.
여기등의 이야기는 길어지므로 다른 기사로 정리하고 싶습니다.
이야기는 돌아갑니다만, SSR인 안심감과 역시 SEO에 강하다! ! ! 그래서 Nuxt에 아키텍처로 선택했습니다.

Why!? Prismic

Prismic의 가장 큰 매력은 무료로도 충분한 기능을 겸비하고 있는 곳입니다.
서버 용량은 100GB까지 무료이며 1개월의 요청/응답 수가 無制限 입니다!
다른 모 HeadlessCMS는 1개월의 요청/응답수가 정해져 있으며, 그 이상을 요구하는 경우는 유료가 됩니다.
간단하게 블로그를 시작하고 싶다! 이미지는별로 게재하지 않는다! ! 그렇다면 Prismic.io는 매우 추천합니다.

Why!? HeadlessCMS

편해.

DB의 유지 보수도하지 않아도 좋고. API도 제공해주고.
소위 백엔드 부분의 공수와 개발 비용은 줄일 수 있으므로 매우 럭키입니다.
실제로 실무에서도 HeadlessCMS로 백엔드 개발 비용을 대폭 절감할 수 있었습니다.
몇 개월 분의 인건비 운용이나 운용 관리비라고 생각하면 압도적으로 비용 성능이 좋습니다.
그러나 이것은 단지 예일 뿐이므로 반드시 HeadlessCMS가 최적은 아닙니다.

개발 환경 준비

Nuxt.js

yarn create nuxt-app blog

이번에는 SSR을 할 수 있으면 좋기 때문에 Rendering mode 가 Universal （SSR / SSG） 가 되어 있으면 됩니다.

필요한 라이브러리 설치

yarn add @nuxtjs/prismic

nuxt.config.js에 Prismic 설정 추가

modules: [
  "@nuxtjs/prismic"
],

prismic: {
  endpoint: "https://xxxx.cdn.prismic.io/api/v2"
}

P리 s 미c. 이오

계정 생성

계정이 작성되지 않은 경우 작성 화면에 입력하여 계정을 작성하십시오.

맞춤 게시 유형 작성

사용자 정의 게시 유형에서 자유롭게 화면 구성을 결정할 수 있습니다.
스쿠쇼의 구성은 메인 비주얼(Heading Image)과 타이틀(title)과 본문(body)을 설정하고 있습니다.

리포지토리 만들기

※여기서 결정한다 Repository Name 는 API명이 됩니다.
한 번 결정한 Repository Name 는 변경할 수 없지만, Display Name 는 몇번이라도 변경하는 것은 가능합니다.

Nuxt에서 Prismic API에 연결

asyncData에서 Prismic API에 연결하여 응답을 받으면 Template에 값을 Props로 渡すだけ구현 자체는 非常に簡単でシンプル 입니다.
이 샘플은 모든 기사를 얻습니다.
기사 단독, 필터링 방법은 Prismic.io 문서에서 확인할 수 있습니다.

API 통신 측

async asyncData({ $prismic, error }) {
  try {
    const blogPosts = await $prismic.api.query(
      $prismic.predicates.at("document.type", "articles")
    )
    return {
      articleList: blogPosts.results
    }
  } catch (e) {
    error({ statusCode: 404, message: "Page not found" })
  }
}

부모 template

<template>
  <main class="main">
    <tags :tag-list="tagList" />
    <Article :article-list="articleList" />
  </main>
</template>

아이 template

<template>
  <div class="article">
    <nuxt-link
      v-for="(item, index) in articleList"
      :key="index"
      class="article__link"
      :to="`/detail/?pageId=${item.id}`"
    >
      <article class="article__card">
        <div class="article__thumbnail">
          <img
            class="article__image"
            :src="item.data.heading_image.url"
            :alt="item.data.heading_image.url"
          />
        </div>
        <div class="article__description">
          <h2 class="article__title">{{ item.data.title[0].text }}</h2>
          <p class="article__body">
            <template v-for="childItem in item.data.body">
              {{ childItem.text }}
            </template>
          </p>
          <p class="article__tag">#{{ item.tags[0] }}</p>
        </div>
      </article>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: "Article",
  props: {
    articleList: {
      type: Array,
      default: () => []
    }
  }
}
</script>

마지막으로

Template를 스스로 준비하는 번거로움은 있지만,
자유롭게 Template를 작성하고 자유롭게 표시 항목도 선택할 수 있습니다.
Prismic.io(HeadlessCMS)는 다른 언어의 지원도 유연하게 하고 있기 때문에 다양한 장면에서 이용할 수 있다고 생각합니다.
Prismic을 포함하여 HeadlessCMS 자체의 인지도가 낮다고 생각하므로, 이 기사를 계기에 흥미를 가져 주시면 감사하겠습니다.