この記事を読んだ後に理解できること

• Next.jsの概要
• Next.jsとReactの違い

Next.jsとは

Next.jsとはReactの拡張フレームワークです。

最大の特徴として、

• SSG、SSR等の機能を使うことによりSEOに強く、パフォーマンスも優れたWebサイトの構築が可能
• Next.js13.4から導入されたReact Server ComponentsによりコンポーネントごとにSSR(Dynamic Rendering)、SSG(Static Rendering)等の設定が可能になり、より高速なWebサイトの構築が可能
• CSS等のスタイリング方法が豊富でTailwind CSSもサポートしている

が挙げられます。

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アプリケーションでは、このレンダリング方法は基本的にできません。

SSG(Static Rendering)



SSGはスタティックサイトジェネレーションの略です。ビルドを行うと同時にデータ取得を行い、HTMLを生成する方法です。

このレンダリング方法のメリットは、

• SEOに強い
• ページ表示が早い

が挙げられます。

デメリットとしては、

• リアルタイムなコンテンツ提供ができない

が挙げられます。

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

Next.jsの公式にこちらのレンダリング方法をお勧めしています。

パフォーマンス面で見るとSSGが最も優れています。

まとめ

Next.jsは、高速でかつSEOに強いWebサイト構築ができるReactの拡張フレームワークです。

今回紹介したレンダリング方法のほかにもISRやOndemandISRといったレンダリング方法があります。

ISRについては以下の記事を参考にしてください。