logo

Dev

WordPressではなくGatsby.jsなどのSSG(StaticSiteGenerator)がいいなぁと思った理由

先日からGatsby.jsとContentful、Netlifyでこの爆速雑記ブログを作っているのですが、

実際に使ってみてWordPressと比べてどうなのかこの記事で書いていきます。

結論から言いますと、

「Gatsby最高」

です笑

では参ります～～～

Gatsby.js等のSSGのいいところ

まず、静的サイトとWordPressとの違いを軽く紹介します。

こんな感じ

静的サイト

  • 既にサイトが生成されている(データベースに行ったりしなくて良い)

  • デフォルトで安全(データベースとかないから)

WordPress

  • ユーザーがサイトを訪れた時に、そのリクエストに応じてサイトを生成

  • セキュリティについて対策が必要

典型的なWordPressサイトの表示までの流れ

ブラウザ → WordPress / PHP → MySQL → HTML/CSS/JS → ユーザーの元へ返す

ユーザーがブラウザでサイトに訪れる

  • WordPress / PHPで何をリクエストしているのか理解する

  • MySQLからデータを持ってくる

  • テンプレート・テーマに応じてサイトを構成してユーザーの元へ返す

静的サイトの表示までの流れ

ブラウザ → HTML/CSS/JS

ユーザーがブラウザでサイトに訪れる

  • 既に生成されたサイトがみれる

これだけなのでめちゃくちゃ読み込みが早い

Gatsby.jsは画像の最適化もしてくれる

gatsby-imageを使うと、画像を最適化した状態で表示してくれます。

画像の読み込みはかなりサイトのパフォーマンスに影響するので、本当にありがたいですね

僕が作った爆速サイトを見るとわかるかと思いますが、画像の読み込みも早いです。

読み込んでいる時は画像がボケて見えていますが、それは設定で変更可能です。

詳しくは公式ドキュメントにて：Gatsby.js

Graphqlにとっかかりやすい

Graphqlはクエリー言語でどこかからデータを引っ張ってくる時に使うのですが、使ったことないと、とっかかりにくいです。

Gatsbyではgatsby developコマンドをたたくと、Localの環境をGraphqlの画面が観れて、Graphqlの方でどんなデータを引っ張ってきているのか可視化されるので、比較的簡単に使えます。

＊Gatsby以外にもあるかと思いますが。

Graphqlでは必要なデータを必要な分だけ引っ張ってこれるので、非常にシンプルで簡単でした。

Netlifyでホスティングで更に早く【CDN】

NetlifyのCDNサーバーが自動で画像やサイトデータのキャッシュを作成してくれていて、日本にもCDNサーバーがあるみたいなので、読み込み速度の向上が期待できます^ ^

CDNについては「第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか）」

この記事がわかりやすいので木になる方は一読しておきましょう～^ ^

微妙なところ

特にないんですが、強いて言えば記事更新時にBuildするので、その分サイトに反映されるまで少し時間がかかるくらいですかね

まぁ僕はタイムセンシティブな記事は書かないので大丈夫なのですが、速報系の記事やニューズには向いていないのかなぁと思います。

まぁNetlifyのWebhookを使えば記事更新時に自動的にBuildしてくれるようにできますし、Build時間の短縮をGatsby.jsのディベロッパーさんが頑張っているので個人的に全然大丈夫ですね笑

こんな感じでGatsbyはいいぞぉ～ということを軽く紹介してみました！！

では～～～

SHARE