ReactとNext.jsの違いとは何ぞや？

# 概要
React、Next.jsはフロントエンド開発では主流になってきています。
だけどこの2つの違いがよくわからんって方が多い感じはします。
そこで両者の違いについて書いていきたいと思います。

# フロントエンド開発のニーズは凄い
多くのWebサービスではVueやReactなどのフロントエンド開発が増えてきました。
バックエンドと比べるとユーザーの目に映るので、かなり重要なポジションですし、
サービスの改善案なども出しやすいです。


# Reactとは
***Webアプリケーションなどの見た目や操作(UI)で使われるJavaScriptのライブラリー***です。
自分も以前勘違いしていましたが、***Reactはフレームワークではありません***。

●補足
ライブラリーは開発者が開発をしやすくなる便利な機能の集まりです。

### 補足(UIとは)
***ユーザーインターフェイスの略***で***コンピューターやデバイスとユーザーがやり取りする場所や手段***です。これは、***ボタン、メニュー、画面上の要素***などです。

ex)
スマートフォンの画面がUIの一部で、アプリを開いたり、写真をスワイプしたり、ボタンをタップしたりすることがこれに該当します。同様に、ウェブサイトを開いた際のメニューやボタンもUIです。

###  補足(UXとは)
ユーザーエクスペリエンスの略で、***ユーザーが得られるサービスでの体験***のことです。

ex)
ECサイトの例ですと、利用した時に「レイアウトがきれいで情報がわかりやすい！」「ボタンのサイズや位置が良くて使いやすい！」と思うなど、どのような体験をして、どのような印象を持ったかを指します。

> 引用　https://qiita.com/hiroki-yama-1118/items/b3388c5dcb155e2e367d

# Next.jsとは
***Reactのフレームワーク***です。***サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）が特徴***です。

### 補足(SSRとSSGの違い)
両者は***WebアプリのパフォーマンスとUXを上げるためのもの***です。

### SSR(サーバーサイドレンダリング)
イメージとして、書籍を印刷して本棚に並べておくイメージです。誰かが本を欲しいと言ったときに、即座に本が手に入るようになっています。

ウェブサイトのページを***事前に作っておいて、ユーザーが来たらそのまま提供する方法***です。これのおかげでユーザーがウェブページを開くときに、サーバーが毎回コンテンツを作る必要がなくなり、あらかじめ作られたHTMLファイルをすぐに提供でき、
ページの読み込みが速く、UXが向上します。

### SSG(Static Site Generator「静的生成」)
イメージとして、レストランでオムライスを注文したら、出来上がったオムライスを提供してくれるイメージです。

 ユーザーがウェブサイトにアクセスすると、サーバー（ウェブサイトのバックエンド）がその瞬間にページの内容を生成して、ユーザーのブラウザに送ります。
これにより、すぐに見たいページが表示されます。
 動的なコンテンツが含まれる場合、サーバーサイドでコンテンツが生成され、ユーザーに提供されます。


ChatGPTも参照しました。

https://qiita.com/Hashimoto-Noriaki/items/d531e26beec657ae016d

|SSG|SSR|
|--|--|
|***ブログ、Qiitaやドキュメントなど***|***ユーザーの更新画面***|
|***ECサイトなどの商品ページ***|***SNSのタイムライン***|

⚫︎SSGは情報などを更新せず1回情報を取得できればOKです。
つまり***ビルド後に変更する必要がないページに使われます。***

⚫︎SSRはユーザーの情報などを更新したります。
つまり***ユーザーのリクエストによって表示内容が変わるページで使われます***。

# ReactとNext.jsの具体的な違いは？
#### 特徴
- ***React***
```JavaScriptのライブラリ```
```UIを構築するために使用```
```ルーティングやサーバーサイドレンダリングなどの追加の機能がない```

- ***Next.js***
```Reactのフレームワーク```
```Reactをベースにしたアプリケーションをより簡単に開発できるようにするためのツールと機能を提供```
```サーバーサイドレンダリングやルーティングなど、機能を補完する役割がある```

#### ルーティング
- ***React***
```ルーティングに対して明示的なサポートなし```
```独自にルーティング機能を導入するか、ルーティングライブラリを使用```

- ***Next.js***
```Next.jsはファイルベースのルーティング```
```ページの作成や管理が簡単```
```ページがpagesディレクトリ内のファイルにマッピングされ、自動的にルーティング```


#### サーバーサイドレンダリング（SSR）と静的サイト生成（SSG)
- ***React*** 
```クライアントサイドでのみ動作するので、SSRやSSGは使えない```
- ***Next.js***
```SSRやSSGは使える```
```パフォーマンスの向上やSEOの最適化ができる```

 #### APIルート
- ***React***
```APIの作成や管理に対する直接のサポートがない```

- ***Next.js***
```APIルートを作成```
```サーバーサイドロジックやデータの処理を組み込める```

# 他にもReactは優秀なとこはある
- ```SPA化```
***ブラウザによるページ遷移を行わずにコンテンツの切り替え***ができる。
- ```CSR```
ウェブページを開くときに、***ほとんどのコードがユーザーのブラウザで実行***され、***ページの表示や操作が行われる仕組み。***
- ```仮想DOMの高速化```
***仮想DOMはブラウザへの負荷を減らし、効率的にUIの更新を行う仕組み***

# その他Next.jsの特徴
他にも```ISR```がありますが、以下の参考記事がわかりやすいので、
***技術選定などでご活用***ください。

https://qiita.com/hiroki-yama-1118/items/b3388c5dcb155e2e367d#csrssrssgisr%E3%81%AE%E3%81%A9%E3%82%8C%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%AE%E3%81%8B

# フロントエンドを最初にやるならReactがいい
これは僕の意見ではなくて、自分よりもはるかに実力のあるフロントエンジニアの方がお話をされていましたが、
ReactはVueやAngularに比べて独特な構文も無くて、JavaScriptの基礎も身に付きやすいみたいです。

●補足
自分はVueやAngularはやっていないです。


# 参考資料

https://qiita.com/hiroki-yama-1118/items/b3388c5dcb155e2e367d

https://zenn.dev/nameless_sn/articles/react_vs_nextjs_description

ChatGPT参照