| 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> | |
| ) | |
| } | |