Gaysbyとは

2022年9月10日(土)

こんにちは

今回からGatsby.jsについての記事を備忘も兼ねて投稿していきたいと思います。

Gatbyとは

Gatsby.jsとは、Reactフレームワークの一種で、静的サイトジェネレーターです。

静的サイトジェネレーターとは、従来のReactのようなWebアプリケーションではなく、ビルド時に全ての静的なHTMLを生成し、それをホスティングサービスにデプロイしたり、AWSのS3などで公開するようなものです。

Reactを用いて静的なWebサイトを構築したいような場合に用いると便利ですね。

単純なReactのみを用いた場合はNode.jsの実行環境が必要になりますし、

CSRのため、実行速度やSEO上の問題もあります。

従来の単純なHTML、CSSを用いるよりコンポーネントを用いた方が開発効率がまったく違いますし、

静的なWebサイトを構築したい場合はかなり良い選択肢になると思います。

またContentfulのようなヘッドレスCMSと連携し、

Contentfulで投稿した記事を取得し、表示することも可能です。

（当ブログはこのGatsby.js + Contentfulで作成されています）

国内ではWebサイトを作成する際にWordPressが選択肢に上がることが多いと思いますが、

Gatsbyは次世代のWordpressとも呼ばれており、学んで損はない技術かと思います。

同じReactフレームワークのNext.jsと比較してどうでしょうか

Gatsbyは静的サイトジェネレーターで、SSGに特化されたフレームワークですが、

Next.jsはSSR、SSG、ISRなどのレンダリングをサポートしており、趣向が違います。

Next.jsでも静的Webサイトは作成可能なようですが、それに特化した技術ではないため、そのために余計なものを省かなければいけなく、静的サイトジェネレーターとしてはGatsbyに軍杯が上がるのではないでしょうか

もちろんNext.jsも開発効率や拡張機能が素晴らしく、大規模なWebサイトやWebアプリケーションを作成する場合はこちらを使うべきです

完全に静的なWebサイトや、データの更新頻度が少ないブログなどを構築する場合はGatsby.js

Webアプリケーション、規模の大きいWebサイト、データの更新頻度の高いサイトを構築する場合はNext.js

のように目的に応じて使い分けるのが良さそうです。

GatsbyはSSGに特化したフレームワークですが、それ故の欠点もあります。

それは、ビルド時に全てのページのHTMLを生成すること

そのため、ヘッドレスCMSなどで記事を投稿した際は、反映するためにビルド&デプロイが必要になってしまうことです。

先ほど更新頻度が低い場合、と書いたのはそのためです。

また、ページ数が多くなってきた場合にビルドの度に時間がかかってしまいますね。

あくまでSSGに特化したフレームワークですので、その点を理解して使用しましょう。