export default function Root({ children }: { children: React.ReactNode }) { return ( {children}

Validating Fallback Shells in Dev

This App is made up of a number of sub-pages which exercise the Cache Components validation performed in dev to ensure it matches up with the validation performed during the build.

When Building routes with dynamic params we validate that the prerender produces an acceptable static shell. If we do not have a complete set of params for any given page we will use a special kind of param called a fallback param which suspends as dynamic and is required to be wrapped in Suspense if accessed so we can ensure there is still an acceptable shell even when we don't know about specific values for that param.

In Dev, our validation needs to match and the way we do this is we look at the current route and determine the most specific set of params that would be availalbe during the build and then use the remaining fallback params for the validation render. This way if you see an error during the build you should be able to debug that error during development too.

Click on some of the sample links for the routes '.../[top]/.../[bottom]'

Complete Params

These links are for routes where the build has a complete set of params to prerender with. We don't expect these to fail at all during validation because nothing is dynamic on these pages other than possible param access

Suspense between [top] and [bottom]

No Suspense

Partial Params

These links are for routes where the top param is prerendered during the build but the bottom param is not. We expect that if you attempt to access the bottom param without a wrapping Suspense boundary it will fail validation

Suspense between [top] and [bottom]

No Suspense

No Params

These links are for routes where there are no params provided during the build at all. We expect these to fail validation if you attempt to access the params above a Suspense boundary.

Suspense between [top] and [bottom]

No Suspense

) }