mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Janka UrygaandGitHub
0dba1c692b
In a dynamic Fizz (SSR) render, rendering work is initially scheduled using microtasks, and a flush will be attempted when the stream gets pulled: https://github.com/facebook/react/blob/8ac5f4eb3601f7381462f8b74ecf24d47259cc20/packages/react-dom/src/server/ReactDOMFizzServerNode.js#L386-L389 This can cause streaming metadata to flake between appearing in `<head>` and `<body>` depending on if whether it had enough microtasks to render before the flush occurred. In general, if something is async, but available after a couple microtasks, then we shouldn't bother streaming it, it should just go into the initial HTML. We achieve this by waiting a task before allowing the stream to get pulled, which allows all the microtasky work to finish without delaying the response too much.
30 lines
745 B
TypeScript
30 lines
745 B
TypeScript
import Link from 'next/link'
|
|
import { connection } from 'next/server'
|
|
|
|
export default async function Page() {
|
|
return (
|
|
<div>
|
|
<h1>Delay Icons</h1>
|
|
<Link id="custom-icon-sub-link" href="/custom-icon/sub">
|
|
Go to another page with custom icon
|
|
</Link>
|
|
<br />
|
|
<Link id="custom-icon-sub-link" href="/custom-icon">
|
|
Go to root page with custom icon
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function generateMetadata() {
|
|
await connection()
|
|
// Delay until after the shell is flushed so that the tags end up in the body.
|
|
await new Promise((resolve) => setTimeout(resolve, 10))
|
|
return {
|
|
description: 'long text description'.repeat(1000),
|
|
icons: {
|
|
icon: `/heart.png`,
|
|
},
|
|
}
|
|
}
|