mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Janka UrygaandGitHub
08ae81fab6
Fixes a bug where a loading.js isn't properly considered as providing a suspense boundary for a page. This is because we're placing the boundary around the segment component itself, but it should be rendered above the `LoadingBoundary` that is rendered around it (in `OuterLayoutRouter`). This PR reworks the boundary placement logic to insert the boundary above ErrorBoundary/LoadingBoundary (but below TemplateContext). It's a little bit tricky to communicate this from `instant-validation` to the client router. Instead of placing the boundary directly like before, we now add a context to the innermost parent segment (`PlaceValidationBoundaryBelowThisLevel`) and then the `OuterLayoutRouter`s for the segments below see this context value and add the validation boundary (`RenderValidationBoundaryAtThisLevel`)
30 lines
628 B
TypeScript
30 lines
628 B
TypeScript
import { cookies } from 'next/headers'
|
|
import { connection } from 'next/server'
|
|
|
|
export default async function Page() {
|
|
return (
|
|
<main>
|
|
<p>
|
|
This page doesn't wrap runtime/dynamic components in suspense, but it
|
|
has a loading.tsx, so these are fine.
|
|
</p>
|
|
<div>
|
|
<Runtime />
|
|
</div>
|
|
<div>
|
|
<Dynamic />
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
async function Runtime() {
|
|
await cookies()
|
|
return <div id="runtime-content">Runtime content from page</div>
|
|
}
|
|
|
|
async function Dynamic() {
|
|
await connection()
|
|
return <div id="dynamic-content">Dynamic content from page</div>
|
|
}
|