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

2021年4月12日

Next.jsの概要

Next.jsは、JavaScriptライブラリであるReact開発におけるフレームワークです。
2016年10月に最初のリリースが行われ、2021年3月時点の最新バージョンは10.0です。
Reactではブラウザ側でレンダリング(htmlの解釈)を行うSPA(Single Page Application)の開発が特徴ですが、Next.jsを使うことでサーバ側でのレンダリングを行うことが可能です。

Next.jsではサーバ側でレンダリングを行うための3つの方式をサポートしています。
以下でその3つの方法を紹介していきます。

SSR(Server Side Rendering)

1つ目はSSR(Server Side Rendering)です。
Next.jsのリリース当初から提供されています。
SPAではブラウザへ空のhtmlを返し、実際のページのコンテンツはJavaScriptを使って生成します。
一度ページを読み込んでしまえば、ページ遷移のたびにサーバへのリクエストが発生することがないため高速で動作させることが可能です。
一方で、JavaScriptのサイズが大きくなればなるほど、初回表示時の読み込みに時間がかかります。
こうした問題を解決するためにSSRではリクエストごとに、サーバ側でレンダリングを行ったものをクライアントへ返すという方式をとっています。

SSG(Static Site Generation)

2つ目はSSG(Static Site Generation)です。
SSRはリクエストのたびにサーバ側でレンダリングを行うため、レスポンスに時間がかかるというデメリットがあります。
SSGはクライアントからのリクエストごとではなく、ビルド時に一括してレンダリングを行います。
すでに静的なhtmlを生成しているためロードは非常に高速です。
ただし、ビルド後に動的にページの内容を変更することができません。
頻繁に更新が行われるWebサイトには不向きという弱点があります。
SSGは2020年3月にリリースされたバージョン9.3から導入されました。

ISR(Incremental Static Regeneration)

最後にISR(Incremental Static Regeneration)があげられます。
ISRではブラウザからのリクエストに対して事前にレンダリングされたhtml(古い情報)を返しつつ、バックグラウンドでリクエストに対するレンダリングを行います。
そのため次のリクエストの際には新しくレンダリングされたhtmlを返すことができます。
SSGにSSRを統合した方式といえるでしょう。
Next.jsでは2020年7月のバージョン9.5からISRをサポートしています。

なぜNext.jsが必要なのか

Reactではブラウザ側でhtmlのレンダリングを行います。
これをCSR(Client Side Rendering)といいます(SPAと同義と捉えてもらって構いません)。
CSRでは必要なコンテンツを初期表示時にまとめてダウンロードします。
そのため、初期表示時の読み込みが遅かったり、SEOに不利だったりします。
そうしたデメリットを克服するためNext.jsを使う必要があります。

初期表示の読み込み速度改善のため

前述したとおりブラウザでレンダリングを行う場合、コンテンツのサイズが大きくなればなるほど、初期表示に時間がかかります。
特に、表示能力はクライアント側のスペックに依存してしまうため、処理能力の低い端末ではより初期表示の遅さが顕著に表れます。

SSRやSSG、ISRといった方式を使えば、事前にレンダリングされたページを返すことができるので初期表示が速く、またクライアントの処理能力に依存することもありません。

SEOのため

CSRでは最初に中身のないhtmlを返します。
クローラ(インターネット上を周回し、Webサイトをデータベース化するボット。htmlを解釈して検索エンジンに登録する)がコンテンツを取得できない可能性があるためインデックスに登録されないことがあります。
最新のクローラはJavaScriptを理解できるためそこまで気にすることはないとも言われていますが、それでも完成されたhtmlを返すSSRやSSG、ISRの方がSEOには有利です。

どういうときにNext.jsを使うのか

ReactはSPAの開発を行う上で強力なJavaScriptライブラリです。
Reactを使うことでサーバ側へリクエストを送ることなくページ遷移を行うことが実現可能です。
ページ数が少ないWebサイトの開発には適していますが、ページ数が多くなってくると初期ローディングにかかる時間が増えます。
Next.jsを導入することで、ページによってCSR、SSR、SSG、ISRを使い分けることが可能になります。
大規模なWebサイトをReactを用いて開発する場合はNext.jsは必須といえるでしょう。

参考