Summary

I'm having trouble understanding why the following setup causes dynamic rendering for my entire application tree:

app
├── example
│   ├── dynamic
│   │   ├── layout.tsx (static)
│   │   └── page.tsx (dynamic)
│   ├── static
│   │   ├── layout.tsx (static)
│   │   └── page.tsx (static)
│   ├── layout.tsx (static) 
│   └── page.tsx (static)
└── layout.tsx (static)

When I navigate to the static page /example/static, I can see that the entire tree was correctly statically rendered at build time, including:

• layout.tsx
• /example/layout.tsx
• /example/static/layout.tsx
• /example/static/page.tsx

On the other hand, when I navigate to dynamic page /example/dynamic, I can see that every level (including the root layout.tsx) in rendered at request time.

I would have expected only the /example/dynamic/page.tsx to by dynamically rendered on request, and the rest to still be statically rendered at build:

• layout.tsx
• /example/layout.tsx
• /example/dynamic/layout.tsx

I ran into this because I wanted to have a statically rendered layout that included some code snippets from the project. The code is read using fs at build time, but that source code does not exist anymore once the application is deployed to Vercel. Partial pre-rendering also did not help me here because even though I can use that to pre-render this correctly the parent layouts, Next.js will still attempt to re-render the entire tree on request, crashing at request time when trying to read the no-longer-existing source code file from the fs after returning the partial pre-rendered cache.

Additional information

No response

Example

https://github.com/tswymer/static-parallel-routes-reproduction