読んでくださってありがとうございます。
今日ははまりにはまった、React・Next.jsのレンダリング技術やその時の挙動をまとめたいと思います。
よかったらコメントなどしてくれると嬉しいです☺️
Reactレンダリング〜描画のながれ
レンダリングとか描画とか、いまいちな理解じゃありませんか？（わたしはそうでした😆）
今一度確認してみましょう！
1.仮想DOM生成
⬇️ １と２の過程のことを、「レンダリング」といいます☝🏻
2.DOM生成
⬇️ １と２で差分があったら、３「描画」されるよ☝🏻
3.描画される✨
React・Next.jsでのレンダリングの種類
前提
- Reactでは、SPAを「SSR＋CSR」で組み合わせて、行われています。
- 初期レンダリングは「SSR」で実行・表示しています。
- それ以降の差分からレンダリングは「CSR」で実行・表示しています。
SPAは、レンダリングのアーキテクチャでありレンダリング技術ではありません☝🏻
Next.jsのレンダリング技術について
Next.jsには、プレレンダリングという技術があります💪🏻
プレレンダリングとは？
クライアントがアクセスする前に事前にHTMLを構築する仕組み（事前にレンダリングする仕組み）です。
実現可能なプレレンダリング・レンダリング技術
SSR
Node.js（サーバー側）で実施されるレンダリング技術です。
コンポーネントのアクセス時、つまり初期表示で使用されます。
ダイナミックインポートなどで無効化にすることもできます！
getServerSidePropsを利用します。
SSG
ビルド時にデータフェッチやpropsの値を決定を行い、HTMLを構築してくれるレンダリング技術です。
getStaticPropsを利用します。
CSR
Reactのレンダリング技術で、全ての処理がクライアント側で行われいます。
useEffect・SWR・axiosなどで取得可能です。