JavaScript

Reactを静的サイト化するGatsby.jsを使うメリット

「Gatsby.jsを使ってみたい」
「Gatsby.jsを使うメリットは?」
「Gatsby.jsにはどんな機能があるの?」

僕も最近まではこうした疑問を持っていました。

今回は僕なりに調べた内容をもとに、上記の疑問に回答していく記事です。

前回の記事ではReactのフレームワーク「Next.js」について解説しました。

そして今回はNext.jsと肩を並べる、Reactの静的サイトジェネレータ「Gatsby.js」について解説していきます。

この記事で解説すること
  • Gatsby.jsとは
  • Gatsby.jsの機能
  • Gatsby.jsを使うメリット

Reactの静的サイトジェネレータGatsby.jsとは

Gatsby.jsは、Reactで作ったコンポーネントを静的なWebサイト化するために使われるます。

こうした機能を持つツールを「静的サイトジェネレータ」と呼びます。

Gatsby.jsの機能とNext.jsとの違い

そんなGatsby.jsと比較されるのがNext.jsです。

Next.jsはツールではなくフレームワークなので、Gatsbyとは少し毛色が異なります。

実際のところ、Next.jsにも「静的サイトジェネレータ」としての機能があります。

ただし、「静的サイトジェネレータ」をメインで使うのあればGatsbyを選択しておくのが良いでしょう。

Gatsby.jsを使うメリット

Gatsby.jsを使うメリットは主に3つあります。

ここにタイトルを入力
  1. 表示の高速化
  2. セキュリティリスクの低減
  3. ユーザー体験の向上

詳細は「静的サイトジェネレータ」に関する記事で解説しているので、そちらを参照してみてください!

ABOUT ME
稲垣 貴映
サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA