Next.jsを選ぶ理由：Reactとの違いとSSG・CSRの使い分け

はじめに

開発者なら言わずもがなReactは知っている方がほとんどかと思います。
Stateで直感的かつ簡潔に状態管理を行うことができ、その際のDOMの更新もReactがよしなにやってくれます。
開発者はdocument.getElementById(xxx)などを使って冗長なHTMLの取得・更新・削除まで気にかける必要はありません。
外部APIの呼び出しといった副作用もReactのuseEffectを使えば、開発環境では二回呼び出し(間にクリーンアップ関数実行)までデフォルトで確認できるなど使いやすさも素晴らしいです。
しかしながら、なぜNext.jsが登場し、それが多くの開発者に親しまれているのでしょうか?
今回はReactとNext.jsを比較し、Next.jsのメリットを簡潔におさらいしようかと思います。

ReactとNext.jsのちがい

Reactは基本的にCSR(Client-Side Rendering)のみ

ReactはCSRのみです。これはつまりブラウザ側でJavaScriptを実行し、DOMを生成するためその処理はすべてユーザー側(ブラウザ)の負担となり表示速度にも課題が残ります。
そして何より、ブラウザでJavaScriptをOFFにしていたら、何も表示されません。。。(あるサイトで調べたところ1%ほどはJavaScript無効でブラウザを利用しているユーザーが居るようです。)
また、React単体だとSPAとしては勝手が良いのですがルーティングに課題があります。

Next.jsはルーティング機能にCSR&SSR&SSGにも対応

ルーティング

Next.jsはルーティング機能を提供しています。
src/app/{xxx}/page.tsx を生成するだけで、http://domain.com/{xxx} へのルーティングの設定は完了します。
また、動的ルーティングにも対応しておりブログ記事など動的コンテンツも簡単に実装することができます。

プリレンダリング

Next.jsはReactの速度面でのデメリットを解決するため、基本的にページのプリレンダリングを実行します。
これはあらかじめ最小限のHTMLを作っておき、その後JavaScriptが読み込まれて、ボタンの押下や送信といった操作できる状態となります。
速度改善だけではなく、SEOにもメリットがあります。

CSR (Client-Side Rendering)

Reactと同じ動きです。
ユーザーのブラウザでのみ処理が行われ、初回表示は遅いのですがその後は高速に動作します。

SSR (Server-Side Rendering)

これはサーバーサイドでHTMLをレンダリングすることです。Nodeが実行できる環境のみ可能です。
サーバーサイドで処理してからクライアントへ返すのでオーバーヘッドが発生しますが、それでも最新の情報を常に返すようなページに向いてます。

SSG (Static Site Generation）

静的なページであれば、予めHTMLを生成しておくことで速度をかなり向上させることができます。
SSGでビルド後に生成されるのは静的なHTML/CSS/JavaScriptファイルなので、Node.jsが使えないサーバー環境でもそのまま公開できます。
例えば、日本で人気のレンタルサーバーであるXserverではnodeがサポートされていません。
そのようなケースでも使えるのは大きな強みですね。

SSGとCSRを組み合わせるメリット

上述したSSGとCSRを組み合わせることでページごとに戦略を選べることが大きなメリットになります。
例えば、コーポレートサイトを考えたとき TOPページや会社概要のページは静的なページですのでSSGが選択できます。これによって表示速度の恩恵を受けることができ、SEO的な観点でもメリットがあります。
そして、コーポレートサイトの管理画面ではSSRを採用することで、記事投稿といった機能において最新の情報の取得や更新処理などを実装できます。
このように一つのフレームワークで複数のレンダリング戦略を選択できるのはNext.jsのとても強力なメリットとなってます。