静的サイトジェネレーターの中でも、自分はGraphQLのデータ層を採用しているGatsbyJSを激推ししている。
しかし、GatsbyJSはビューをReactで書く必要があり既存のサイトを移植するというのが大変だった。

今日見つけたのは、GatsbyJSにインスパイアされVue.jsでビューを書けるGridsomeという静的サイトジェネレーターである。

まだバージョンは0.2.2なので、ファーストインプレッション程度に思ってもらいたい。

複数のデータソースを元に、静的サイトを生成する図はほとんどGatsbyのそれと変わらず、Vue.jsでビューを書くことが出来る。

> WordPress Starterの観察WordPress Starterの観察

例えば、公式のWordPressのstarterを取り上げてみる。

@gridsome/source-wordpressのようなソースデータを扱うパッケージをインストールしたのち、gridsome.config.jsにプラグインを利用するための記述を追加する。

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
        baseUrl: 'YOUR_WORDPRESS_URL'
      }
    }
  ]
}

@gridsome/source-wordpressによって追加されたソースデータはGraphQLで取得出来るようになる。

vueの単一ファイルコンポーネントの中のpage-queryにデータを取得するGraphQLを書くと、template内で参照出来るようになる。という話。

<template>
  <div>
    <h2>Latest blog posts</h2>
    <ul>
      <li v-for="edge in $page.allWordPressPost.edges" :key="edge.node._id">
        {{ edge.node.title }}
      </li>
    </ul>
  </div>
</template>

<page-query>
query Blog {
  allWordPressPost (limit: 5) {
    edges {
      node {
        _id
        title
      }
    }
  }
}
</page-query>

> Nuxtと比べてなにがいいの？Nuxtと比べてなにがいいの？

Nuxtの静的サイトじゃダメなのか？という話があるが、Nuxtは1ページ目については静的サイト化してくれるが、2ページ目以降は、asyncDataに記述されたAPIリクエストが行われてしまうので、キレイな静的サイトではないという認識。

GridsomeはGraphQLで取得したデータを静的ファイルに保存するので、本番環境で外部のAPIへのリクエストは発生しない。静的化されたファイルはレスポンス早いし、先読みも出来る。

みやおかさんの「Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る」が詳しい。

勢いで書いた。

参考: Say hello to Gridsome 👶🎉💚 - Gridsome