SSG(静的サイトジェネレーター)のメリット

SSG(Static Site Generator)とはビルド時にAPIからデータを取得し、HTMLファイルを生成するものです。Next.jsも機能としてはSSGだけではないのですが、今回はSSGとして利用します。

SSGでWebサイトを作るメリットとして

  1. ページの表示スピードが高い
  2. セキュリティが高い
  3. CDNを利用して配信できる

という点が挙げられます。HTMLが予め生成されているためSPAと比べてSEOの心配もないです。

ページスピードの速さ

実際にこのブログのGoogleのPage Speed Insightsのスコアは以下の通りでPCは満点の100、モバイルでも90点台をマークしていてめちゃくちゃ速いです。(2021/9/12現在)

PSIの目安としてはモバイルが50を超えていれば平均より速いかなくらいだそうです。

セキュリティの高さ

CMSを利用したWebサイトとして圧倒的なシェアを誇るのがWord Pressですが、実際にページを表示するテーマとコンテンツを管理するCMSが同一サーバー上に存在します。

Word Pressは管理画面や利用しているプラグインの脆弱性を突かれて悪意のある攻撃を受けることが多く、Word Pressはセキュリティが不安で採用できないという企業も少なからず存在します。

SSGを利用したいわゆるJAMstackのWebサイトの場合は実際に表示されるサイトとCMSが別のところに存在しているので公開されているサイトは攻撃の影響をダイレクトに受けないためセキュリティが非常に高いです。

CDNの利用ができる

SSGでは静的ファイルが生成されるので、そのままCDNで配信することができ、NetlifyやVercelなどCDNを利用したホスティングサービスもメジャーなものがいくつかあります。

CDNはソフトウェアのアップデートなどにも利用されていて、セキュリティが高く、大量のアクセスにも耐えられるためスケーリングもしやすく、スピードも早く、そのメリットをそのまま受けることができます。

ブログを作るのにNext.jsを採用した理由

SSGとして有名なのはGatsby.jsやNuxt.jsなどがありますが、2020年の途中からNext.jsが存在感を大きく増しました。

Next.jsはReactのフレームワークでVercelが開発をしています。Vercel社はVercelというホスティングサービスも開発/運営している企業で、Next.jsとVercelの組み合わせで他のSSGではなかなか実現できていないような機能が明確な差別化の要因になっています。

画像の最適化を自動でしてくれるコンポーネントNext/Image

Next.js 10.0から登場したNextのコンポーネントでWebPの生成やリサイズを自動でしてくれます。APIから取得した画像も対象でNext.jsの大きなメリットの1つです。

動的なコンテンツを必要な箇所だけ再生成してくれるIncremental Static Regeneration(ISR)

SSGのデメリットとして記事を更新してから全ページをビルドするので完了するまでにタイムラグがあることが挙げられます。ページ数が膨大になると更新にそれだけ多くの時間が掛かってしまいます。

ISRは基本的にはSSGと同じで静的ページを生成するのですが、ビルドして一定時間が経った時にアクセスがあると裏でAPIからデータをまた取得し、投稿データなどの更新がある場合は影響のある範囲だけで自動的に再ビルドされます。今のところNext.jsだけの機能になります。

ページ単位でSSGとSSRが選べる

今回作るのはブログなので全ページSSGで問題ないですが、リアルタイム性が欲しいページが一部ある場合はそこだけSSRにすることもできます。

Word Press側の設定

Word Pressのメリットは管理画面が使いやすいことで、会社でもWeb担当の人はWord Pressに慣れていたりします。記事作成自体はWord Pressで行うのでSSGを利用したJAMstackに移行しても更新作業自体はほとんど変わりがなく済みます。

Word PressではテーマをWebサイトの表示に使わない代わりにAPIを利用します。デフォルトでREST APIがあるのでそれを使うこともできるのですが、ACF(Advanced Custom Fields)などでカスタムフィールドを設定する場合にカスタマイズが必要になため設定が割と大変です。

最近は「WP GraphQL」というプラグインを利用してGraphQLのエンドポイントを作ることがほとんどです。

Explorerで取得したいデータの項目にチェックを入れるとquery文を作ってくれて取得したデータも整形された形ですぐ確認することができるようになっています。

ACFやYoastSEOなどのメジャーなプラグインで設定したデータも拡張版をインストールすることで簡単に取得することができます。

Next.jsのWord Pressを使うデモもWP GraphQLの利用を前提した作りになっているので、割とメジャーな方法だと思います。

データ連携にGraphQL Code Generatorを利用

GraphQLを利用するときにおすすめのツールがGraphQL Code Generatorです。

必要なデータを取得する設定をするとそのデータを実際に取ってくる関数を作ってくれたり、取得するデータの型定義を自動でしてくれたりするのでTypeScriptを使う場合にも非常に便利です。

GraphQLのクエリ文を書いておくと関数を作ってくれるのが、それぞれページでデータ取得する時の記述がスッキリしていい感じです。

まとめ

以上のような技術を使うことで爆速のブログを作ることができました。JAMstackのサイトでよくある遷移するページにDOMを書き換えるjsを予め読み込んでおくことでページ遷移がネイティブの遷移に比べてすごい速い仕様もあるのでPSIのスコア以上に体感で速いサイトになっています。

セキュリティのことを考えても従来のWord Pressのテーマを利用したサイトよりもNext.jsなどを利用したJAMstackサイトが採用されることはこれから増えていくと思います。