export default function Root({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<main>
<h1>Validating Fallback Shells in Dev</h1>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
Click on some of the sample links for the routes
'.../[top]/.../[bottom]'
</p>
<section>
<h2>Complete Params</h2>
<p>
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
</p>
<h3>Suspense between [top] and [bottom]</h3>
<ul>
<li>
<a href="/complete/prerendered/wrapped/prerendered">
/complete/prerendered/wrapped/prerendered
</a>
</li>
<li>
<a href="/complete/prerendered/wrapped/novel">
/complete/prerendered/wrapped/novel
</a>
</li>
<li>
<a href="/complete/novel/wrapped/novel">
/complete/novel/wrapped/novel
</a>
</li>
</ul>
<h3>No Suspense</h3>
<ul>
<li>
<a href="/complete/prerendered/unwrapped/prerendered">
/complete/prerendered/unwrapped/prerendered
</a>
</li>
<li>
<a href="/complete/prerendered/unwrapped/novel">
/complete/prerendered/unwrapped/novel
</a>
</li>
<li>
<a href="/complete/novel/unwrapped/novel">
/complete/novel/unwrapped/novel
</a>
</li>
</ul>
</section>
<section>
<h2>Partial Params</h2>
<p>
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
</p>
<h3>Suspense between [top] and [bottom]</h3>
<ul>
<li>
<a href="/partial/prerendered/wrapped/prerendered">
/partial/prerendered/wrapped/prerendered
</a>
</li>
<li>
<a href="/partial/prerendered/wrapped/novel">
/partial/prerendered/wrapped/novel
</a>
</li>
<li>
<a href="/partial/novel/wrapped/novel">
/partial/novel/wrapped/novel
</a>
</li>
</ul>
<h3>No Suspense</h3>
<ul>
<li>
<a href="/partial/prerendered/unwrapped/prerendered">
/partial/prerendered/unwrapped/prerendered
</a>
</li>
<li>
<a href="/partial/prerendered/unwrapped/novel">
/partial/prerendered/unwrapped/novel
</a>
</li>
<li>
<a href="/partial/novel/unwrapped/novel">
/partial/novel/unwrapped/novel
</a>
</li>
</ul>
</section>
<section>
<h2>No Params</h2>
<p>
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.
</p>
<h3>Suspense between [top] and [bottom]</h3>
<ul>
<li>
<a href="/none/prerendered/wrapped/prerendered">
/none/prerendered/wrapped/prerendered
</a>
</li>
<li>
<a href="/none/prerendered/wrapped/novel">
/none/prerendered/wrapped/novel
</a>
</li>
<li>
<a href="/none/novel/wrapped/novel">
/none/novel/wrapped/novel
</a>
</li>
</ul>
<h3>No Suspense</h3>
<ul>
<li>
<a href="/none/prerendered/unwrapped/prerendered">
/none/prerendered/unwrapped/prerendered
</a>
</li>
<li>
<a href="/none/prerendered/unwrapped/novel">
/none/prerendered/unwrapped/novel
</a>
</li>
<li>
<a href="/none/novel/unwrapped/novel">
/none/novel/unwrapped/novel
</a>
</li>
</ul>
</section>
</main>
</body>
</html>
)
}
v2.0.0