Next.jsの実行モデルと前提

Next.jsの実行モデルと前提

Next.jsの実行モデルと、実務で事故を防ぐための前提条件を詳しく解説します。

実行モデルとリソースの物理的制約

Next.jsはサーバーサイドとクライアントサイドの両方で実行されるため、両方の環境の制約を考慮する必要があります。

主な物理的制約

サーバーサイド（Node.js）:

1. DB・外部APIのコネクション数

   • 接続プールの上限
   • 接続リークは数時間後にシステム全体を停止させる

2. メモリ使用量

   • Serverless環境: 通常128MB〜10GB
   • 常駐プロセス: メモリリークに注意

クライアントサイド（ブラウザ）:

1. ブラウザメモリ（ヒープメモリ）

   • モバイルデバイス: 通常512MB〜2GB
   • デスクトップ: 通常2GB〜4GB
   • メモリリークは数時間後にブラウザがクラッシュする

2. DOMノード数

   • ブラウザの制限: 通常10,000〜100,000ノード
   • 大量のDOMノードはレンダリングパフォーマンスを低下させる

3. イベントリスナー

   • 削除されないイベントリスナーはメモリリークの原因
   • クロージャーで参照が保持される

4. バンドルサイズ

   • 初回ロード時間に影響
   • 通常500KB〜2MBが推奨

実際の事故例:

10:00:00 - アプリケーション起動（メモリ使用量: 50MB）
10:00:01 - ページ遷移1（メモリ使用量: 100MB）
10:00:02 - ページ遷移2（メモリ使用量: 150MB）
...
10:30:00 - ページ遷移100（メモリ使用量: 2GB）
10:30:01 - ブラウザがクラッシュ
10:30:02 - ユーザー体験の大幅な低下

Next.jsの実行モデル

SSR/SSG/CSRの実行モデル

実行モデル:

Next.jsアプリケーション
├─ サーバーサイド（Node.js）
│  ├─ SSR（Server-Side Rendering）
│  ├─ SSG（Static Site Generation）
│  └─ API Routes
└─ クライアントサイド（ブラウザ）
   ├─ CSR（Client-Side Rendering）
   ├─ Hydration
   └─ Client Components

重要な特徴:

1. SSR: サーバーでHTMLを生成し、クライアントに送信
2. SSG: ビルド時にHTMLを生成し、静的ファイルとして配信
3. CSR: クライアントでHTMLを生成
4. Hydration: サーバーで生成されたHTMLをクライアントでインタラクティブにする

サーバーサイドでの実行

制約:

// ❌ 悪い例: サーバーサイドで問題のあるコード
export async function getServerSideProps() {
  // 問題: 長時間実行される可能性がある
  // 問題: メモリを大量に消費する
  const data = await fetch('https://api.example.com/large-data');
  const json = await data.json();

  return {
    props: {
      data: json, // 大量のデータをpropsに渡す
    },
  };
}

問題点:

• 実行時間の制限: Serverless環境では実行時間に制限がある
• メモリ制限: 大量のデータをメモリに保持できない
• 接続プールの枯渇: 外部APIへの接続が増加し、接続プールが枯渇する可能性

クライアントサイドでの実行

制約:

// ❌ 悪い例: クライアントサイドで問題のあるコード
'use client';

export default function Page() {
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    // 問題: 大量のデータをメモリに保持
    fetch('/api/large-data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.text}</div>
      ))}
    </div>
  );
}

問題点:

• メモリ制限: ブラウザのメモリ制限により、大量のデータを保持できない
• DOMノード数の増加: 大量のDOMノードが作成され、レンダリングパフォーマンスが低下
• バンドルサイズの増加: 大量のデータがバンドルに含まれると、初回ロード時間が増加

実行環境による特性

環境	特徴	主なリスク
Serverless (Vercel)	短寿命・自動スケール	コールドスタート、実行時間制限、メモリ制限
常駐プロセス	長寿命・安定動作	メモリリーク、接続リーク
ブラウザ	クライアントサイド実行	メモリリーク、DOMノード数の増加、イベントリスナーのリーク

まとめ

Next.jsの実行モデルと前提のポイント：

• リソースの物理的制約: サーバーサイドとクライアントサイドの両方の制約を考慮
• SSR/SSG/CSR: それぞれの実行モデルの特性を理解
• サーバーサイド: 実行時間制限、メモリ制限、接続プールの枯渇
• クライアントサイド: メモリ制限、DOMノード数の増加、バンドルサイズの増加

重要な原則: 性能ではなく制約を前提に設計する。リソースの垂れ流しは数時間後にシステム全体を停止させる。