构建我的第一个 Next.js 14 网站，我希望了解如何更好地实现网站性能。在我的 layout.tsx 中，我有一个标题组件
layout.tsx（精简示例）
import '@/styles/globals.css'
import Header from 'Header'
import Footer from 'Footer'
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body>
<div className="flex flex-col h-screen">
<Header /> // priority here?
<main className="grow"> // lazy load everything below?
{children}
</main>
<Footer />
</div>
</body>
</html>
)
}
我想知道与Priority的图像类似，是否有一种方法可以为整个
Header我能找到的最接近的主题是：“Lazy Load React Server Components”
查看文档中是否有此功能，但没有运气：
在带有应用程序路由器的 Next.js 14 中，是否能够在组件级别（而不仅仅是图像级别）设置优先级，从而允许
above-the-fold您可以在 NextJS 中使用 Suspense 来在特定组件的任何异步操作完成时不阻止和显示“正在加载”小部件，从而允许您在应用程序获取随后要显示的任何数据时显示标题。 例如：
export default async Fuction MyComponent(...)
{
const asyncData = await GetData();
return <div>{asyncData.Somethin}</div>
}
export default function Layout(...)
{
returnu <html lang="en">
<body>
<div className="flex flex-col h-screen">
<Header /> // priority here?
<main className="grow"> // lazy load everything below?
{children}
<Suspense loading="<div>Loading</div>">
<MyComponent.../>
</Suspense>
</main>
<Footer />
</div>
</body>
</html>
}
使用这些时，您还获得了加载边界，您可以确保根布局始终加载，并且任何子页面/布局都将显示loading.tsx内的任何内容，直到加载页面中的所有异步数据，从而导致您在任何其他数据流入之前显示的标题，并且您可以获得在构建所有内容时显示一些占位符数据或动画的额外好处。
简而言之，你的结构可能看起来像
- app
- layout.txs
- page.txs -> Suspend would go here for anything blocking in page.tsx
test-path/
- layout.tsx
- page.tsx
- loading.tsx -> When defining the loading state, when visiting youpage.com/test-path the layout.tsx would load and therfore the Header, then whatever inside the loading.tsx will display until page.tsx is ready