はじめに
これまでNext.jsの勉強をしたことがなかったので、最近少し動画を見ながら勉強をしてみました。今回はソースコードの内部的な話ではなく、「そもそもNext.jsはどういった仕組みか？」とか「どういったときに使用するのが便利か？」といった、概念に関わる知識をまとめようと思います。
※勉強に使用した動画「日本一わかりやすいNext.js入門」：https://www.youtube.com/watch?v=F77RUjHZEAc&list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-
Next.jsとは？
Next.jsにはそれぞれ以下のような特徴があります。
| 項目 | 内容 |
|---|---|
| 意味 | React(フロントエンド)のフレームワーク |
| 利点 | 多様な大規模なアプリ開発に便利 |
| 特徴 | SSGとSSRを用途に応じて使い分けることができる。 |
Next.jsはReact言語をベースにアプリ開発をサポートするフレームワークになっており、多様な大規模アプリを作成するためのツールとして優れています。その優れている点で大きな特徴として挙げられるのが「SSG」と「SSR」といった特徴になります。
SSGとSSRとは？
SSG(Static Site Generation)
SSGの特徴と流れは以下のようになります。
| 項目 | 内容 |
|---|---|
| 意味 | 静的なコンテンツを生成するアーキテクチャ |
| 利点 | 静的なコンテンツを高速で表示できる。 |
| 欠点 | リアルタイム性は担保できない。 |
| 用途 | 画面の更新頻度が低いコンテンツに利用(例：ブログ, お問合せフォーム)。 |
SSGは、サーバ構築時にコンテンツを生成することで、リクエスト時にコンテンツを表示できる仕組みとなっています。事前にサーバ構築を完了させておくことで、画面遷移時のコンテンツも高速で表示することができます。しかし、あらかじめサーバ内でコンテンツを事前作成するため、リアルタイムなデータが欲しい場合には不向きとなっています。
そのため、ブログやとお問合せフォームなどの画面の更新頻度が低いコンテンツに利用されます。
SSR(Static Server Rendering)
SSRの特徴と流れは以下のようになります。
| 項目 | 内容 |
|---|---|
| 意味 | リクエストごとにサーバ側でHTMLファイルを作成するアーキテクチャ |
| 利点 | ①動的なコンテンツを表示できる。 ②リアルタイム性も担保してくれる。 |
| 欠点 | 画面表示の読み込みに時間がかかる |
| 用途 | データの更新頻度が高いコンテンツに利用(例：SNS, Youtube)。 |
SSRは、クライアントサイドがリクエストを投げるタイミングでサーバ側でコンテンツを作成する仕組みとなっています。リクエストごとに画面表示処理を行うため、動的なコンテンツにも対応ができる利点があります。また、DBにも随時アクセスすることで、リアルタイム性も担保できます。その一方でSSGと比較して、逐次サーバ側でコンテンツを生成するために、画面表示の読み込みに時間がかかる欠点もあります。
そのため、SNSやYoutubeなどのデータの更新頻度が高いコンテンツに利用されます。
また、上図のように非同期通信を適用することで、コンテンツを作成するwebサーバを経由せずにデータの送受信のみを行うことができるため、より高速にリアルタイム性の担保が実現できます。
リクエスト先指定方法
SSG,SSRどちらのアーキテクチャでもクライアントサイドからリクエストを送信するのですが、そのリクエスト先を指定する方法として、大きく2種類あります。
静的なルーティング
| 項目 | 内容 |
|---|---|
| 特徴 | 1つのファイルを1つのURLに紐付ける方法 |
| 用途 | 一覧画面やTOP画面 |
ここでは、1つのファイルに対して1つのURLを指定する方法になります。用途として、一覧画面やTOP画面などコンテンツの一覧やベースとなる画面に対して用いることが多いです。
動的なルーティング(ダイナミックルーティング)
| 項目 | 内容 |
|---|---|
| 特徴 | 1つのファイルを複数のURLに紐付ける方法 |
| 用途 | 詳細画面 |
静的なルーティングとは対称的に、1つのファイルに対して複数のURLを指定する方法になります。このルーティングをダイナミックルーティングと呼びます。また、特に深い層までURLを指定するルーティングをCatch all routeと呼びます。用途として、詳細画面などコンテンツの中身を作成する画面に対して用いることが多いです。
最後に
Next.jsについて、上記動画を軸に色々調べながらまとめてみました。これで、Next.jsの大枠の概念はある程度把握できる(気がする)ので、今後は「TypeScriptの導入方法」や「実際に模写コーディングしてみる」ことをやって更なる理解を深めていければと思っています。