今回はNext.jsのSSG（Static Site Generation/静的サイトジェネレーション）について紹介します。
Next.jsのSSGとは？（静的サイトジェネレーター）
Next.jsのSSG（Static Site Generation/静的サイトジェネレーション）とは、アプリケーションのビルド時にすべてのHTMLページが生成されるレンダリング方式です。生成されたファイルはCDN※にキャッシュされクライアントからのリクエストに応じて即座に提供されます。
CDN（Content Delivery Network）とは、世界中に張り巡らされた配信ネットワークを利用して、Webサイトにアクセスしようとするユーザーに効率的かつ高速にWebコンテンツを配信する仕組みです。
これにより、Webサイトの表示を高速化させたり、たくさんの人が同時にアクセスしても遅くならないようにすることができます。
Next.jsのもう一つのレンダリング方式「SSR（Server Side Rendering）」や、Reactのレンダリング方式「CSR（Client Side Rendering）」との違いについては以下の記事で詳しく紹介しています。
開発用サーバーと本番サーバーの違い
今後このチュートリアルを進めていくうえで、次のような疑問をいだく方がいるかもしれません。
「なぜ、開発サーバーでは一度もビルドしていないのにページが表示されるのか？」
本番サーバーで運用する場合、”最適化されたビルド”が一度だけ生成されそのビルドをデプロイすることでアプリケーションを構築します。ビルドコマンドを実行した際に事前レンダリングが行われ、全てのHTMLページが生成されます。
開発サーバーの場合、変更したコードを即座にブラウザに反映させる必要があるので、ビルドコマンドを実行しなくても（ビルドしなくても）リクエストのたびに事前レンダリングが行われるようになっています。
とはいえ、開発サーバーと本番サーバーの違いを意識する必要はあまりありません。重要なのはNext.jsが本番環境でどのように動作するかを理解することにあります。このチュートリアルを通して、それをしっかり学んでいきましょう。
新たなプロジェクトの準備
現在、NEXTJSというフォルダにhello-worldというNext.jsのプロジェクトディレクトリが存在していると思いますが、今回からはNEXTJSフォルダの中に「pre-rendering」という新たなプロジェクトを作成して学習に使用していこうと思います。
まずは、NEXTJSフォルダでnpx create-next-appを実行します。以下のコマンドを実行すると「pre-rendering」というプロジェクトディレクトリが作成されます。
Terminal
npx create-next-app pre-rendering
pre-renderingディレクトリの不要なファイルやフォルダを削除します。
- pre-rendering/pages/api
- pre-rendering/styles/Home.module.css
index.jsファイルの内容も次のように変更します。
pre-rendering/pages/index.js
function Home() {
return <h1>Next JS pre-rendering</h1>
}
export default Homeまとめ
以上でSSG/静的サイトジェネレーターの紹介は終わりです。
次回はSSGでのデータフェッチとProps（getStaticProps）について紹介します。
それでは！
