どうも。ocwsの奥田です。
今回は、自分のことサイト ocws.jp をWordPress と HTML のサイトから Gatsby.js 1本にしたという話をしたいと思います。
経緯
まずは、サイトを軽くしたいな（動き的にも）というところから始まりました。
以前のこのサイトの構成は、こんな感じでした。
[静的ページ: HTML、動的ページ: ブログ、お問い合わせ: PHP]
とりあえず、静的ページはいいとして、動的ページ WordPress をどうにかしたいと思いました。
WordPress という巨人
WordPress は言わずもがな、PHP と React で作られている CMS です。
WordPress は自前でブログを書きたいというユーザーには人気の CMS で、コーポレートサイトにも大いに使われている オープンソースの CMS です。
私は WordPress を 2011年くらいから使っているので、130以上の記事があります。
まず、この記事を抱えた WordPress を使うのかどうなのかかから選定が始まりました。
WordPress をヘッドレスとして使用
根本的に、毎回サーバーでブログをレンダリングして、表示するというところに疑問を感じ始めていたので、そのあたりを静的ページで表示させたいなと思っていました。別にコメント機能あるわ けじゃないですしね。
[サーバーでレンダリングする忙しい絵]
[静的データをそのまま出す絵]
そこで、WordPress を使うなら API とかを使ってヘッドレス、つまりブログ情報だけ WordPress にお願いして、ガワ（見た目）はこっちでええように作るわ！という構想です。
SPA にするのか SSR にするのかはたまた
WordPress をヘッドレスで使う場合、ガワをどういう風にするのかを決めなければなりません。
SPAかSSRかSSGか。
それぞれ特徴はあるので、どうしようか悩んでいましたが、結果的にはSSGにするよなってなりました。
理由としては、Googleには気に入られたいから、SPA はちょっとどうなんやろうとか、
SSR は以前別の個別プロジェクトで SSR が初動めちゃくちゃ遅かったのがあってあんまりいいイメージがないのもあり、 SSG が「静的」というイメージに一番マッチしたのでそうしようと思いました。
SSG どれにする？
SSG にする場合、どれで作ろうかというところで悩みました。2つ候補がありました。
Nuxt.js か Gatsby.js か
結果的には Gatsby.js を選びました。
Gatsby.js を選んだ理由
いくつか理由はあるが、Wordpress の API を使うなら、Gatsby.js が公式にやり方が載っており、簡単そうだったのと、Reactベースの実装があまりしていなかったので、勉強がてらにというのもありました。
実際、Gatsyby.js にしてどうだったか
やはり思った通り、激早でした！ページ読み込みもそうですが、ページ遷移がとても早く、一瞬 で変わるのがとても最高ですが、あまりに見慣れないので、逆に違和感を覚えるほどです。
どういったサイトのSSGが向いているのか
SSGで制作する際に向いているサイトは、急なレスポンスなどが少ないものなどが最適だと思います。例えば、コーポレートサイトやブログなどもその類になります。ログインしてコメントを残すものですと、あまりSSGには向かないかなと思います。
SSGでのサイト制作の方はお気軽にお問い合わせください！