5/5 Next.jsとReactの違い・必要性

Next.jsとは何か

• Reactのフレームワークです

なぜ必要か

• ページ数が多いWebサイトでは読み込み速度が遅くなってしまう
• Reactはページ数の少ない小規模な開発に向いている

ReactとNext.jsの違い

• レンダリング手法が違う

Reactのレンダリング手法

• クライアント側でレンダリングをする
• CSR（SPA）と呼ばれる

Next.jsのレンダリング手法

• サーバーサイドでレンダリングする
• SSG,SSR,ISRと呼ばれる

Next.jsのメリット

• クライアントのPCに依存せずにレンダリングできるので、読み込み速度が安定・向上する
• 直感的なルーティング設計ができる
• SEO対策になる
• APIエンドポイント設計もできる

プリレンダリングとは

プリはどんな意味？

• 『前に』という意味

プリレンダリングとは

• Next.jsで初回読み込み時にサーバーサイドでレンダリングされることを指す
• Reactでこれが行われないため、読み込みが遅くなる

※ Next.jsではプリレンダリングが行われるため読み込み速度が速く、これをSSG,SSR,ISRと呼ぶ

ページごとにレンダリング手法を切り替えることができる

• レンダリング手法は4つある
  • SSG　Static Site Generation 静的サイト生成
  • CSR Client Side Rendering　クライアントサイドレンダリング
  • SSR Server Side Rendering　サーバーサイドレンダリング
  • ISR Incremental Static Regeneration　インクリメンタル静的再生成

SSG

• ビルド時にHTMLを生成する
• SSGは表示してしまったら情報の更新はできない
• 使い所はブログ・ドキュメント・ECの商品ページ

SSR

• ユーザーがrequestを投げた時にサーバーサイドでHTMLを生成する
• Twitterで言えば、つぶやきを投稿したときのpostリクエスト時にサバーサイドからHTMLを返す仕組み
• 更新ができる
• 使い所はSNSのタイムライン・ユーザープロフィール

SSGをレストランで例える

まずはレストランで席に座る

この後の状態で双方の違いを例えることができる。

React

テーブルの上が何もない状態で、メニューから料理をオーダーすることで運ばれてくる。食べるには料理を待つ必要がある。

Next.js(SSG)

テーブルにはすでに料理が並んでいる。すぐに食べることができる。

参考

Udemy 【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座