【Nuxt.js】非同期通信を含むサーバーサイドレンダリング

学んだことをアウトプットしていきます。
今回はNuxt.jsでシンプルなSSRを書いていきます。

Qiitaのアクセストークンを用いてQiitaに「Nuxt.js」タグを付けて投稿された記事を20件表示させる処理です。
アクセストークンはこのURLにアクセスして発行出来ます。
Qiitaアクセストークン

####tempalte処理
早速書いていきましょう。
まずpagesフォルダ配下にindex.vueを作成してください。
変数itemsに取得したデータを挿入するので、v-forでそれぞれ取り出して表示させます。
記事のタイトル、ユーザーID、投稿記事、URLを表示してみました。
記事本文が130文字を超える部分は「...」として省略しています。

pages/index.vue

<template>
  <section class="container">
    <div>
      <h3>Nuxt.jsのタグが付けられた投稿一覧</h3>
      <ul>
        <li v-for="item in items" :key="item.id" class="post-list">
          <h4>
            <span>{{ item.title }}</span>
            <small>ユーザーID： {{ item.user.id }}</small>
          </h4>
          <div>{{ item.body.slice(0, 130) }}...</div>
          <p><a :href="item.url">{{ item.url }}</a></p>
        </li>
      </ul>
    </div>
  </section>
</template>

####script処理
asyncData関数を利用しています。
非同期通信を実行し、結果としてサーバーサイドレンダリングするための処理です。
「nuxt.js」の箇所を他の文字列に書き換えると、そのタグがつく記事を取得出来ます。

pages/index.vue

<script>
export default {
  async asyncData({ app }) {
    // 'nuxt.js'のタグがつく投稿を取得する
    const items = await app.$axios.$get('https://qiita.com/api/v2/items?query=tag:nuxt.js')
    return {
      items
    }
  }
}
</script>

####style処理
特に記述することはありません。

pages/index.vue

<style>
.container {
  min-height: 100vh;
  padding: 16px;
}

h3 {
  margin: 16px 0;
  padding: 8px 0;
  border-bottom: 1px solid #ee5e5e;
}

.post-list {
  margin-top: 30px;
}
</style>