Next.js 15 における Layout と Page の実行順序を検証してみた

結論

Next.js 15 では、Server Components の layout と page は並列に実行されるため、明確な親子の実行順序は保証されません。一方で、Client Components に関しては従来通り、親 → 子の順序で実行される挙動を維持しています。

検証の背景

Next.js 15 でlayoutの実行順序がpageよりも早くなったと耳にしていたのですが、実際にどういう挙動になっているのかを確認してみたかったので検証してみました。

検証に使用したリポジトリはこちら
👉 https://github.com/hrfm1623/test-next15-rendering-order

検証環境

• Next.js 15
• TypeScript
• React

検証項目

1. デフォルトのレンダリング順序
2. Client Components（Layout/Page）の実行順序
3. Client Layout で null を返すケース
4. RSC Page でエラーが発生するケース

検証結果

1. デフォルトのレンダリング順序（Server Components）

実際のログ:

🔵 [Middleware] Start Processing /blog/server
🟢 [RootLayout] Start Root Layout Rendering
🟡 [BlogLayout] Start Blog Layout Rendering
🟡 [ServerBlogLayout] Start Server Blog Layout Rendering
🟡 [ServerBlogPage] Start Server Blog Page Rendering
🟡 [BlogLayout] Async Operation Complete
🟡 [ServerBlogLayout] Async Operation Complete
🟢 [RootLayout] Async Operation Complete
🟢 [ServerComponent] Start Server Component Rendering
🔴 [ClientComponent] Initial Client Component Render
🟡 [ServerBlogPage] Async Operation Complete
🟢 [ServerComponent] Async Operation Complete

• 基本的にlayout → page の順に実行開始され、layoutのレンダリングを待たずにpageのレンダリングが始まる

2. Client Components（Layout/Page）の実行順序

実際のログ:

🔵 [Middleware] Start Processing /blog/client
🟢 [RootLayout] Start Root Layout Rendering
🟡 [BlogLayout] Start Blog Layout Rendering
🟡 [BlogLayout] Async Operation Complete
🟢 [RootLayout] Async Operation Complete
🟢 [ServerComponent] Start Server Component Rendering
🔴 [ClientComponent] Initial Client Component Render
🔴 [ClientBlogLayout] Initial Client Blog Layout Render
🔴 [ClientBlogPage] Initial Client Blog Page Render
🟢 [ServerComponent] Async Operation Complete

• Client Components はComponent → Layout → Page

3. Client Layout で null を返すケース

実際のログ:

🔵 [Middleware] Start Processing /null-client
🟢 [RootLayout] Start Root Layout Rendering
🟡 [NullClientPage] Start Page Rendering
🟢 [RootLayout] Async Operation Complete
🟡 [NullClientPage] Async Operation Complete
🟢 [ServerComponent] Start Server Component Rendering
🔴 [ClientComponent] Initial Client Component Render
🔴 [NullClientLayout] Initial Client Layout Render
🔴 [NullClientLayout] Returning null
🟢 [ServerComponent] Async Operation Complete

• Server Components の実行は通常通り完了
• Client Layout が null を返してもエラーにならない
• Page コンテンツは表示されない

4. RSC Page でエラーが発生するケース

実際のログ:

🔵 [Middleware] Start Processing /error-page
🟢 [RootLayout] Start Root Layout Rendering
🟡 [ErrorLayout] Start Layout Rendering
🟡 [ErrorPage] Start Page Rendering
🟡 [ErrorPage] Before Error
⨯ Error: Intentional RSC Page Error
    at ErrorPage (src/app/error-page/page.tsx:8:8)
   6 |
   7 |   // 意図的にエラーを発生させる
>  8 |   throw new Error("Intentional RSC Page Error");
     |        ^
   9 |
  10 |   return (
  11 |     <div className="p-4"> {
  digest: '53399773'
}
🟡 [ErrorLayout] Async Operation Complete
🟢 [RootLayout] Async Operation Complete
🟢 [ServerComponent] Start Server Component Rendering
🔴 [ClientComponent] Initial Client Component Render
🟢 [ServerComponent] Async Operation Complete

• エラーが発生したコンポーネント以外は実行継続

まとめ

• Server Components: layoutから実行開始されるが、layoutのレンダリングを待たずにpageのレンダリングが始まるため実行順序の保証はできない
• Client Components: 従来通りの親子順序を維持