経緯

まずは、サイトを軽くしたいな（動き的にも）というところから始まりました。

以前のこのサイトの構成は、こんな感じでした。

[静的ページ: HTML、動的ページ: ブログ、お問い合わせ: PHP]

とりあえず、静的ページはいいとして、動的ページ WordPress をどうにかしたいと思いました。

WordPress という巨人

WordPress は言わずもがな、PHP と React で作られている CMS です。
WordPress は自前でブログを書きたいというユーザーには人気の CMS で、コーポレートサイトにも大いに使われているオープンソースの CMS です。

私は WordPress を 2011年くらいから使っているので、130以上の記事があります。

まず、この記事を抱えた WordPress を使うのかどうなのかかから選定が始まりました。

根本的に、毎回サーバーでブログをレンダリングして、表示するというところに疑問を感じ始めていたので、そのあたりを静的ページで表示させたいなと思っていました。別にコメント機能あるわけじゃないですしね。

[サーバーでレンダリングする忙しい絵]

[静的データをそのまま出す絵]

そこで、WordPress を使うなら API とかを使ってヘッドレス、つまりブログ情報だけ WordPress にお願いして、ガワ（見た目）はこっちでええように作るわ！という構想です。

WordPress をヘッドレスで使う場合、ガワをどういう風にするのかを決めなければなりません。

SPAかSSRかSSGか。

それぞれ特徴はあるので、どうしようか悩んでいましたが、結果的にはSSGにするよなってなりました。

理由としては、Googleには気に入られたいから、SPA はちょっとどうなんやろうとか、
SSR は以前別の個別プロジェクトで SSR が初動めちゃくちゃ遅かったのがあってあんまりいいイメージがないのもあり、 SSG が「静的」というイメージに一番マッチしたのでそうしようと思いました。

SSG にする場合、どれで作ろうかというところで悩みました。2つ候補がありました。

Nuxt.js か Gatsby.js か

結果的には Gatsby.js を選びました。

いくつか理由はあるが、Wordpress の API を使うなら、Gatsby.js が公式にやり方が載っており、簡単そうだったのと、Reactベースの実装があまりしていなかったので、勉強がてらにというのもありました。

やはり思った通り、激早でした！ページ読み込みもそうですが、ページ遷移がとても早く、一瞬で変わるのがとても最高ですが、あまりに見慣れないので、逆に違和感を覚えるほどです。

SSGで制作する際に向いているサイトは、急なレスポンスなどが少ないものなどが最適だと思います。例えば、コーポレートサイトやブログなどもその類になります。ログインしてコメントを残すものですと、あまりSSGには向かないかなと思います。

SSGでのサイト制作の方はお気軽にお問い合わせください！