Next.jsのレンダリング方法について

レンダリング方法

CSR（クライアントサイドレンダリング）
- データ取得、ルーティング設定などは全てクライアントサイドで行われる
- クライアント側からNode.jsとAPIサーバにリクエストを行う
  - Node.jsから画面描画に必要なhtml（未レンダリング）を取得
    - useEffectやuseStateなどのHookはCSRとして処理される
  - APIサーバから動的データなどのjsonを取得
  - 取得したHTMLとjsonデータをクライアントで組み合わせて画面レンダリング
- （+）
  - 静的ファイルのみ設置すればページを構築できる
  - Node.js実行は不要になるので、サーバーの負荷が軽量
- （-）ブラウザ側の初期描画に時間がかかる場合がある
SSR（サーバーサイドレンダリング）
- CSRがクライアント側でhtmlとAPIデータを組み合わせた画面描画を行うのに対して、SSRはNode.js（サーバーサイド）でAPIサーバとの疎通、レンダリングを行い、完成したHTMLをクライアントに返却する
- （+）生成されたHTMLを解析できるのでSEOに強い
- （-）サーバ側でAPIデータ取得やレンダリングを行うのでHTMLをクライアントに返却するまで時間がかかる
  - キャッシュを有効活用することで改善可能
  - Next.jsのfetch関数を使用：参考
SG（静的サイト生成）
- 事前にビルドしたときにAPIサーバとの疎通とHTMLファイルの生成を行い、Node.js（サーバーサイド）に配置
- （+）クライアントからリクエストされたときにはすでにNode.jsに生成済みのHTMLファイルが設置されているため、画面描画速度が速い
- （-）動画データなどの更新頻度が高い動的コンテンツとは相性が悪い

Next.jsではどのような使い分けをするか？

next13.4以降、デフォルトでサーバーコンポーネントを使用されることになった

⇒ 関数コンポーネント内で非同期でデータフェッチすることができるようになった

⇒ 場合によってはuseEffectなどの機能を活用してCSRと使い分けたい場合がある

page.js（SSRとCSRのコードが混在しているケース）

use client を先頭に指定したことにより、SSRとして扱うべき処理もクライアントコードとみなされるため、画面描画パフォーマンスに影響を与える可能性がある

// このファイルではCSRを使用することを示す記述
// 指定がなければデフォルトでSSRコードとみなされる
'use client' 

import ClientComponent from "./components/ClinetComponent";

export default function SSR() {
    const [state, setState] = useState(undefined);
    useEffect(() => {
        setState('client loaded');
    }, [])

    return (
        <>
            <div>SSR Page</div>
            <div>{state}</div>
        </>
    )
}

対策：CSRで動かしたい処理を別コンポーネントに切り離す

page.js（SSRのみ）

import ClientComponent from "./components/ClinetComponent";

export default function SSR() {
    return (
        <>
            <div>SSR Page</div>
            <ClientComponent />
        </>
    )
}