Next.jsの概要をざっと読んでみました

ざっと読んでみたので自分なりの理解をメモ程度に残しておきます。
ほとんど手は動かさず読んだだけです。

読んだもの

(How Next.js Works)[https://nextjs.org/learn/foundations/how-nextjs-works]

Reactの概要に続いてNext.jsについてざっくり読んでみました。

Compiler

Next.jsのCompilerはRustで書かれていてcompilation、minification、bundlingなどを行う。

Compilation

ブラウザがパースできるコードに書き換える過程。Compilationは開発やビルドの段階で完了する。

Minification

改行やスペースなど走らせるのに不要なものを取り除いてくれる過程。ファイルサイズが縮小されることでパフォーマンスを高めてくれる。

Bundling

複数のファイルをまとめることでファイル数を減らし、リクエスト数を減らすことでパフォーマンスを高めてくれる。

Code Splitting

各ページで必要なコードだけを読み込めるようにコードを細かく分ける過程で、そうすることでページの読み込みが早くなるそうです。

Next.jsはReactベースのフルスタックフレームワーク

ReactをベースにWebアプリケーションを作るためもフレームワークだそうで、ReactでSPA（Single Page Application）は作れるけれどRoutingなどSPAのネックとなるところもフレームワークでカバーできる。

Next.jsはRendaringのメソッドをページレベルで設定できる

Server-Side Rendering（SSR）、 Static Site Generation（SSG）、 Client-Side Rendering（CSR）の３つから適したメソッドを設定できる。

Server-Side Rendering（SSR）とは

リクエストのたびにサーバ側でレンダリングし直してクライアントに送る。

Static Site Generation（SSG）とは

runtimeでは生成されない、ビルドされるときに生成されてサーバにストアされていている。
Next.jsはIncremental Static Regeneration (ISR)を使うことができるので、
ビルドのたびにサイト全てビルドし直すのではなく更新した部分だけupdateしてくれる。

Networkまわりのこと

Origin Server

アプリケーションのコードがストアされているサーバ。

Content Delivery Network（CDN）

staticなデータをストアしておく。世界中に複数ありクライアントから物理的に近いところからアクセスすることでレスポンスを早くでき、さらにOrigin Serverの付加軽減（Runtimeを短くすること）にもつながる。

The Edge

CDNのような存在だけどStaticなデータを返すだけでなく、Edge上でコードを走らせることができる。
Edge上でコードを走らせることでクライアントに送るコードを減らしたり、Origin Serverの付加軽減（Runtimeを短くすること）にもつながる。

雑記

ReactとNext.jsの概要をざっと読んでみました。
そろそろ手を動かしてみます。

(Reactの概要をざっと読んでみました)[https://zenn.dev/kentarofurukawa/articles/9d8206a8f967f7]