Chapter 03

Gatsbyの概要

gatsby-header.png

Gatsbyとは

Gatsbyとは一言でいうと、爆速なサイトを手軽に構築するためのReact製のフレームワークです。
公式サイト: https://www.gatsbyjs.org/

一般的なブログやニュースなどのWebサイトでは記事のデータをデータベースに保存しておき、サイトにアクセスが来るたびにデータを取得し、サーバー上でHTMLを生成するという方法が一般的でした。しかし、これでは**「ちょっと効率が悪い」**のです。

効率が悪いポイントは2つあります。

  1. データベースへの問い合わせ
  2. サーバー上でのHTMLの生成

記事データは一度作成された後は更新されることは少ないです。
更新頻度の少ないデータに対して毎回データベースに問い合わせる必要はありません。また、データが変わらなければ生成するHTMLも変わらないはずです。
つまり、事前にデータを1度だけ取得しあらかじめHTMLを生成しておき、アクセスが来たらそのHTMLを返すようにすれば、サーバーとデータベースの仕事が少なくなって効率的じゃないでしょうか?
Gatsbyでは、このような手法でサイトを作成することができます。静的なページを事前に作っておくことから、「静的サイトジェネレーター(Static Site Generator 略してSSG)」と呼ばれたりします。
gatsby-description.png

料理屋で例えると、お客さんから注文がくるたびに料理をイチから作るのではなく、あらかじめ料理は作っておき注文が入ったら提供するだけという感じです。

ここで**「データが新規追加、更新された場合にはどうすればいいのか?」**という疑問が浮かぶ方もいらっしゃると思います。
これは、webhookを用いた対応方法を「4-3. 記事公開・更新をトリガにデプロイを行う」にて紹介しますので、一旦あたまの片隅にしまっておきましょう。

更新頻度の高いデータ

更新頻度が高いデータを扱うSNSやECサイトでは、事前にHTMLを作成しておくことは効果を発揮できないばかりか、データをリアルタイムに更新できずビジネス要件を満たせず逆効果となる場合があります。
このような動的なデータに関しては静的サイトジェネレーターの恩恵を受けられないということは理解しておく必要があります。
では動的なデータはGatsbyで扱えないのかと言われると、そうではありません。
GatsbyはReact製のフレームワークなので、React(一般的なSPA)で動的なデータを扱うようにAPI経由でデータを取得し画面に反映すれば動的なデータも扱うことができます。

※ とはいえ、更新頻度の高いデータのみを扱う場合にはGatsby以外(Next.jsなど)の技術選定をすることをおすすめします。

Gatsbyを使う利点

これまでの説明では速度に着目していましたが、実はそれ以外にもGatsbyを使うメリットがあります。
以下は手軽にサイトを構築できるという切り口でみたGatsbyのメリットであるといえます。

  • サーバーレスな構成にでき、運用が楽になる。
    • データベースを持たなくていい
    • アプリケーションサーバーを持たなくていい
  • プラグインやスターターライブラリを使って手軽にWebサイトを構築できる

このようにGatsbyを使うことは手軽に速いWebサイトが作れ、開発者はサービスの本質的な機能の開発に注力できるようになるという恩恵を受けられるでしょう。