Next.jsについて

・Next.jsはReactのフレームワーク
・SSR、SSG、ISR、CSRの四つのレンダリング方法がある
・React Server Components（RSC）とはコンポーネントのレンダリングを「サーバー側」「クライアント側」で分ける技術 ・App Routerではデフォルトでサーバーコンポーネントになるのでクライアントサイドでレンダリングしたい時は”use client”の記述が必要
・RSCとSSRを組み合わせると初期表示が速くなる上にクライアントに送信するJavascriptの量が抑えられる
・Suspenceは「useState」に頼らなくても「ロード中」の画面を表示することができる。
・Suspencetp SRCを使用することでサーバー側でもコンポーネント単位の非同期的なデータの取得が可能となる。
プリレンダリング機能を備えているので生のReactより表示速度が速い。
・「SSR」ハイドレーション機能のおかげでサーバー側で予め生成されているHTMLファイルをページ移行のタイミングで受け取りそこに記述されたJavaScriptを実行することでページ内のDOMを完成させているイメージ
・「SSG」SSRとは違い、ビルド時にHTMLを生成するため基本的に静的サイトであればSSGが良い
・「ISR」SSGの発展版、一定期間でページを再生成することができるためリアルタイムで情報を表示したいときに最適「revalidate」パラメータを指定することで秒数指定が可能
・「CSR」Reactのデフォルト生成方法、Next.jsでは「useEffect」を使用してCSRを実装する

RSCについて

RSCはコンポーネントをサーバー側で処理するかクライアント側で処理するかを選べるが以下のような縛りがある
onClick,onChangeなどのイベントリスナーが使えない
useState（状態管理）,useRffect（効果管理）も使えない
サーバーコンポーネントはクライアントコンポーネントをインポートしてレンダリングできるが逆はできない

App Routerについて

デフォルトでRSCが適応されるのでクライアント側で実行させるには「use client」の表記が必要
・SSRは初期表示が早いがクライアント側に送られるjsの量が多い
・RSCの場合はサーバーとクライアントそれぞれのコンポーネントがレンダリングされる