Next.jsを使う理由

Next.jsとは

JavaScriptライブラリであるReact開発におけるフレームワークのこと。
Next.jsではサーバ側でレンダリングを行うための3つの方式をサポートる。

SSR(Server Side Rendering)

SSRとはリクエスト毎にサーバー側でレンダリングを行ったものをクライアントへ返すという方式を取っている。
特徴

  • リクエストのたびにサーバー側でレンダリングを行うために、レスポンスに時間がかかる。

SSG

クライアントからのリクエスト毎でなく、ビルド時に一括してレンダリングを行う。
特徴

  • 静的なhtmlを生成しているためロードはとても高速
  • ただしビルド後に動的にページの内容を変更することはできない。

ISR

ISRではブラウザからのリクエストに対して事前にレンダリングされたhtml(古い情報)を返しつつ、バックグラウンドでリクエストに対するレンダリングを行う。
特徴

  • 次のリクエストで新しくレンダリングされたHTMLを返すことができる。
  • SSGにSSRを統合したような方式。


なぜNext.jsが必要か

Reactの場合は、ブラウザ側でレンダリングを行う(CSR)が、CSRでは必要なコンテンツを初期表示時にまとめてダウンロードするため、初期表示の読み込みが遅かったり、SEOに不利だったりする。
そうしたデメリットの克服のためにNext.jsを使う。


参考

Next.jsとは何か?何ができるのか?React開発のフレームワークを解説 | Promapedia