Next.jsとReactの違い

サーバ機能

Next.jsはサーバ機能を持っているため、Webサーバを別途用意する必要はなく、node.jsを用意した環境であれば動いてくれます。

また、簡易なAPIサーバ機能も作ることができます。

一方、Reactの場合はReactで作ったアプリケーションを動かす環境としてWebサーバを用意する必要があります。

また、ReactにAPIサーバの機能はないので、APIサーバも別途用意する必要があります。

レンダリング方法

CSR

Reactアプリケーションは、CSR（クライアントサイドレンダリング）と呼ばれるレンダリング方法を採用したSPA（シングルページアプリケーション）が一般的です。

仕組みは以下となります。

この手法のメリットは、

リアルタイムな更新が可能であること

である。

上記画像で例えると、出品者がDB上に商品を登録すれば、ユーザはすぐにその情報を取得することができます。

デメリットとしては、

デバイスのスペックによって表示速度が異なる。

文字通り、ユーザがみているブラウザ側でjavascriptが実行された後、画面が描画されるので、デバイスのスペックによって描画速度が左右されます。

なお、Next.jsのアプリケーションでこのレンダリング方法は可能です。

SSR（Dynamic Rendering）

SSRはサーバーサイドレンダリングの略でWebサーバでHTMLを生成して、レンダリングする方法になります。

この方法でレンダリングさせるメリットは、

SEOに強い
リアルタイムなコンテンツ提供が可能

があります。

デメリットとしては、

表示されるまでに若干時間がかかる

があります。

Reactアプリケーションでは、このレンダリング方法は基本的にできません。

Next.jsとは？Reactとの違いについて解説

目次