cheezBlog

Next.jsとGatsbyを比較

このブログをReact.jsにリプレイスするため、技術選定をしました。

リプレイスの前提

  • 現cheezBlogはページパフォーマンスが悪く、コードが煩雑化しているため
  • Reactを本格的に学びたいため

選定基準

  • React.jsを存分に学ぶことができる
  • ページパフォーマンスが高い
  • Contentfulとの親和性が高いこと
  • 拡張性が高いこと

検討しているフレームワーク

  • Gatsby
  • Next.js(SSG)
  • Next.js(ISR)

Gatsbyとは

ページパフォーマンスに定評のあるReactベース静的サイトジェネレータ。 テーマやプラグインを組み合わせてサイトを作る仕組みになっており、さくっと静的サイトを作れます。 GraphQLでさまざまなデータソースからコンテンツを取得でき、コードをシンプルに管理ができます。

メリット - とにかく高速に表示されるよう工夫されてる

  • 画像が読み込まれる際のスピード遅延のボトルネックを解消
    • 画像読込中のプレースホルダーの表示やlazyloadなど
  • 内部リンクはプリフェッチされる
  • ファーストビューで必要なCSSは、外部ファイルではなくインラインで読み込んでくれる

メリット - Contentful用のプラグインがある

GatsbyにはGraphQLでContentfulのデータを取得することができるプラグインがあります。

公式: gatsby-source-contentful

spaceIdとaccessTokenを設定して、あとはGraphQLを書くだけでブログのデータを取得できるので、複雑なコードを書かずともブログデータを出力でき、とても便利です。

メリット - SEO対策用プラグインがすごく充実している

Gatsbyには500個以上の大量のプラグインがあり、SEO対策用のプラグインも充実しています。

noindexやcanonicalや構造化マークアップが簡易的に設定できる

ページごとのSEO対策に必要な機能が詰まっているgatsby-plugin-next-seoというプラグインがあります。 <GatsbySeo />というcomponentを利用するだけで、oindexやcanonical、構造化マークアップなどの設定ができます。

公式: gatsby-plugin-next-seo

robots.txtの生成

わすれがちなrobots.txtの生成もプラグインでjsで管理できます。

公式: gatsby-plugin-robots-txt

サイトマップの生成

ビルドした際に自動でサイトマップを生成するプラグインもあります。

公式: gatsby-plugin-sitemap

PWA化

gatsby-plugin-offlineとgatsby-plugin-manifestを併用することで、簡単にPWAにも対応できます。

公式: gatsby-plugin-offline 公式: gatsby-plugin-manifest

RSS化

あまり必要ではないかもしれませんが、RSS化もできます。

公式: gatsby-plugin-feed

参考: Gatsby.jsでSEO対策する方法をまとめてみた【SEOプラグインも紹介】

Next.jsとは

メリット

SSR/SSG/ISRなど選択肢がある

今主流のSSGだけではなく、SSGのデメリットをさらに改善したISRなども使えます。

ISRとは
  • Incremental Static Regenerationの略
  • アクセス時に静的ファイルを生成する(SSGよりビルド時間短縮)、それをキャッシュする
  • サーバーサイド側でデータのフェッチができる(動的コンテンツを実現できる)

▼ 参考 https://zenn.dev/akino/articles/78479998efef55

ISRでは、動的表示もできてパフォーマンスが高いため

SEO対策のプラグインがある

Gatsbyには劣りますが、SEO対策のプラグインがあります。 noindexやcanonicalや構造化マークアップなどの設定ができるので、 ブログ系サービスを作る時は活用できます。

公式: next-seo

Gatsby vs Next.js

利用者

どの静的サイトジェネレーターが人気かというのを一覧で見れるサイト https://jamstack.org/generators/

Next.jsの方がスターが多い。

自分が重要視したい部分

上から順に、自分が重要視している部分です。

  • React.jsを存分に学ぶことができる -> Next.js
  • ページパフォーマンスが高い -> Gatsby
  • 拡張性が高いこと -> Next.js
  • Contentfulとの親和性が高いこと -> Gatsby

そのため、今回はNext.jsで作ろうと思います！！

参考資料