File size: 6,371 Bytes
b91e262 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 | 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>
)
}
|