【Next.js】SSG(Static Site Generator)を徹底解説

今回は、Next.jsのSSG(Static Site Generator)についての内容になります!

SSGはNext.jsの公式も推奨としている技術で、これからも進歩していくと思いますので、分からない方はこの記事を読んで学んでみませんか?

最後まで読んで頂けると幸いです!

では、Next.jsのSSG(Static Site Generator)について解説していきます!

SSG(Static Site Generator)とは?

SSGとは、ビルド時にHTMLを生成することを指しており、ビルドとは、作成したプログラムを機械語に翻訳して使用できる状態にして、一つのファイルにまとめることを指しています。

しかし、SSGの場合は一つのファイルにまとめるのではなく、一つ一つのページを事前にHTMLに生成するイメージを持って下さい!

これが、Pre-renderingと呼ばれるものです!

Pre-renderingとは事前にHTMLファイルを生成し、レンダリングすることを指しています。

通常のサイトでは、ユーザーからリクエストが投げられる(HTTPリクエスト)度にサーバーがHTMLを生成し、ページをレスポンスとして返します!

この方法だと、一度読み込んだ部分もリクエストが投げられる度に再度、生成する必要性があるので処理速度も負荷もベストプラクティスとは言えません。

ですが、SSGではビルドのタイミングで事前にHTMLを生成しているので、リクエストが投げられたら生成は終わっているのでそれをレスポンスとして返すだけです!

なので、速度はとても速くなります!

これで、SSGについて理解できたかと思います!

次の内容では、SSGのメリット・デメリットについて解説していきます!

SSGのメリット・デメリット

下記では、SSGのメリット・デメリットについて解説していきます!

メリット

処理が高速

事前に生成されてあるHTMLファイルをレスポンスとして返すだけなので処理が非常に速いです!

SEOが強い

SPA(シングルページアプリケーション)では、ユーザーアクセス時のクライアント側にページのコンテンツが依存してしまっていたので、適切にページをクローラーに表示することができませんでした。

ですが、SSGではサーバー側にページのコンテンツが依存しているのでクローラーに適切にページを表示することができます!

デメリット

リアルタイムの情報に弱い

ビルド段階で出来ているものをレスポンスとして返すのでユーザーのアクセスによって情報を変更することができません!

情報の更新頻度が高いページをSSGとするのは非推奨です!

まとめ

いかがでしたか?

今回の内容はNext.jsのSSG(Static Site Generator)について解説させて頂きました。

Next.jsを使用するのであればSSGはマストで押さえておくべき知識ですので是非覚えておいて下さい!