next.js SSGのユースケース

Question

疑問に思ってること

next.jsを勉強中です。SSGの活用方法がいまいちピンとこなかったので質問させていただきました。
SSGはビルド時に、データをフェッチする面で、普通の静的ファイルを配信するのとの違いだと思います。
SSGだと自分でnpm run build を叩かなければ、永遠にデータが更新されないということだと認識しているのですが、その場合かなり使用できる機会、ユースケースが限られるのではないかと思いました。

具体的にどういうケースで使われているのかが知りたいです。

Answer 1

その場合かなり使用できる機会、ユースケースが限られるのではないか

対話処理を伴わなければ機能面で大きな問題はありません。ビルドコマンドを叩いて、アップローダを実行するだけですから、日々の更新作業は全然大したことはないでしょう。

一方、SSGのメリットはたくさん存在します。

まず公開用サーバにはhtmlやCSSのファイルを置くスペースさえあれば良く、PHPだのmySQLだのが走っている必要がありません。ということは安価にスペースを確保できる余地が広がります。またシステムのセキュリティホールへの対処とかクラッキングの予防とかいった対応も容易となるでしょう。
サイト構築は手元のPCでやればよく、できたものをアップロードしていく形ですから、必然的に手元にコピーが残ります。何らかのトラブルで公開用サーバが壊れたり、ハッキングされて改変されたりしたとしても、引っ越しや復旧が容易です。
またサーバがやっているのは極めて基本的なHTMLデータの送信だけなので、閲覧者から見ればレスポンスが高速で快適です。

この辺のメリットを評価し、WordPressより優れていると結論してSSGに移行した実例が以下に紹介されています。

WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA

ちょっと利用実績をググってみました。

• 動的サイトと静的サイトの違い【メリット&デメリットを比較】 ー 実際の静的サイト
• 静的サイトジェネレーターが使われたコーポレートサイト事例集 Next.js 編 | Dyno
• 静的サイトジェネレーターが使われたコーポレートサイト事例集 Gatsby 編 | Dyno
• 静的サイトジェネレーター(Hugo) | taneCREATIVE株式会社

このようにけっこうな名のある企業でも利用されているケースが在ります。まして、小回りの効いた運用が求められる草の根的情報発信サイト、個人・小規模事業所の営業用サイトなどなら、SSGの強みが存分に活かせるというものでしょう。

さくさんのSSGが公開されていてその多くはJavaScriptあるいはPythonやRubyなどで書かれているので、当然ソースが公開されています。その気になれば痒いところに手が届く細かなチューニングも可能です。なんなら完全自作しても良いわけです。今後どんどん盛り上がるジャンルだと思います。