Next.jsとは何か？
Next.jsは、Reactのフレームワークです。Reactに様々な便利な機能を追加しているものなんだなーというような認識で大丈夫です！
では、どのように便利になっていったかは、Reactも踏まえて確認する必要があり、それを本記事で紹介していきます。
React が生まれた理由
ライブラリやフレームワークを使わない場合は、ウェブサイトを作成する際、HTMLやCSSだけでなく、DOMを操作するためにJavaScriptを使用すると思います。
しかし、JavaScriptの記述量が増えるにつれて、管理が難しくなる問題が生じました。さらに、不要なレンダリングが多くなると、パフォーマンスが低下するという課題もあると思います。
そこで、これらの問題を解決したのがReactです。ReactはDOM操作をより効率的に行えるように設計されており、JavaScriptのライブラリとして広く使用されています。
React からnext.js が生まれた理由
Reactは特に、ページ数が少ない小規模なウェブサイト開発に向いています。これは、ReactがSPA（Single Page Application）の開発に適しているからです。
SPAは初回の読み込みは遅いですが、その後のページ遷移は高速です。
しかし、Reactにも欠点があり、ページ数が多い大規模なウェブサイトでReactを使用すると、初回の読み込み速度が遅くなるという問題があります。
この欠点を解消するために開発されたのがNext.jsです。Next.jsは、大規模なウェブサイトでも初回の読み込みを高速化することができるフレームワークなのです。
※Reactが小規模なウェブサイト開発に向いているのは個人的な感想です。大規模開発でも可能ですがSPAの構成上少しだけ重たいのかなと思うような印象を感じるためです...。
ReactとNext.jsのレンダリング手法からの違い
React
Reactの初期表示は、真っ白な画面から始まります。その後、JavaScriptが読み込まれ、HTMLとCSSがレンダリングされるという流れになっています。
これは、ユーザがリクエストを出した時点でサーバ側ではまだHTML、CSS、JavaScriptが構成されていないためです。このため、初回の読み込みが遅くなることがあります。しかし、2回目以降の表示は、すでに画面が読み込まれているため、表示が早くなります。
このような動作をCSR（Client Side Rendering）またはSPA（Single Page Application）と呼びます。
Next.js
Next.jsではリクエストを受けた時点で、すでにHTML、CSS、JavaScriptが構成されています。
その後、必要な部分だけJavaScriptが呼び出されます。例えば、ボタンを押した時のアニメーションや記事の取得などです。
なぜリクエストを受けた時点でHTML、CSS、JavaScriptが構成されているかというと、それはサーバ側で事前に画面を構築しているからです。これをプリレンダリングと呼びます。
(この手法は、ユーザからすると最初から画面が表示されるため、表示が遅いという感じがなくなります。その結果、ユーザのストレスが軽減され、サイトの離脱率が減少にも繋がります。)
このような動作をSSG（Static Site Generation）と呼びます。
ReactとNext.jsの違いは、サーバ側で事前にレンダリングが行われるかどうか、という点になります。
ReactとNext.jsの適用シーンとそのメリット・デメリット
React
メリット
ページ数が少ない場合、クライアント側でJavaScriptを読み込むだけで、ページ遷移がスムーズになる
デメリット
大規模なウェブサイトでは、初回の読み込みが遅くなる可能性あり
Next.js
メリット
ユーザのリクエストごとにサーバ側でレンダリングすることで、大規模なウェブサイトでも高速な処理が可能。
SEO対策に有効で、事前にサーバ側でページをレンダリングしておくことで、検索エンジンがコンテンツを理解しやすくなります。
クライアントのPCの性能に依存せず、サーバ側でレンダリングするため、一定のパフォーマンスを保つことが可能
デメリット
サーバ側でのレンダリングには時間がかかるため、非常に高頻度の更新が必要な場合には適していない
Next.jsにおけるウェブサイト生成方法
Next.jsでは、ウェブサイトの生成と表示に関して、3つの主要な方法があります。それぞれが異なる特性と利点を持っています。
SSG（Static Site Generator）
これは、ビルド時にサーバ側でHTML、CSSなどが生成される方法です。表示に必要な要素（タイトル、本文など）はAPIから取得し、ビルド時にページを構成します。これは更新頻度が低いウェブサイトに最適で、ブログ、ドキュメント、ECの商品ページなどが典型的な例です。
SSR（Server Side Rendering）
これは、クライアントがページをリクエストする度にサーバ側でHTMLが生成される方法です。必要に応じてAPIからデータを取得し、HTMLをレンダリングしてクライアントに返します。更新頻度が高いウェブサイトに最適で、SNSのタイムラインやユーザープロフィールページなどが該当します。
ISR（Incremental Static Regeneration）
これはSSRとSSGの中間的な方法で、クライアントからのアクセスに応じてサーバ側でHTMLを生成し、レスポンスとして返します。この点ではSSRと同じですが、生成されたページはCDN（コンテンツデリバリーネットワーク）にキャッシュされます。SSGと比べて更新頻度がやや高いウェブサイトに適しており、キャッシュの期間も設定できます。
終わりに
Next.jsは、SSG、SSR、ISRの方法があり、これらはページごとに選択できることが強みだなと思います。これにより、ウェブサイトのパフォーマンスがさらに最適化されると思うのでこれから触ってみた感想とかを記事にまとめていけたらなと思っています。