mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
69388a52fe
This PR introduces a build optimization to create a "partial prerender" of the page. 1. During compilation, we create a static shell for the page using your existing Suspense boundaries. Components that can be static will be included in this static shell, leaving holes for the dynamic components. 1. Using `<Suspense />`, we can define fallbacks to be included in the partial prerender, as well as the holes for the dynamic components to stream into. This means Next.js can initially serve a static loading skeleton, kicking off the dynamic parts in parallel. Then, the dynamic components stream in on demand. Dynamic components can use `cookies()`, `headers()`, `'cache': 'no-store'`, or `unstable_noStore()` to opt-into dynamic rendering. Co-authored-by: Zack Tanner <[email protected]>
39 lines
918 B
React
39 lines
918 B
React
import React from 'react'
|
|
import Link from 'next/link'
|
|
|
|
const links = [
|
|
{ href: '/' },
|
|
{ href: '/no-suspense' },
|
|
{ href: '/suspense/node' },
|
|
{ href: '/suspense/edge' },
|
|
{ href: '/suspense/node/nested/1' },
|
|
{ href: '/loading/nested/1' },
|
|
{ href: '/loading/nested/2' },
|
|
{ href: '/loading/nested/3' },
|
|
]
|
|
|
|
export default function Root({ children }) {
|
|
return (
|
|
<html>
|
|
<head>
|
|
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
|
</head>
|
|
<body>
|
|
<main className="prose my-6 mx-auto">
|
|
<h1 id="page">Page</h1>
|
|
{children}
|
|
<h2>Links</h2>
|
|
<ul>
|
|
{links.map(({ href }) => (
|
|
<li key={href}>
|
|
{href} - <Link href={href}>link</Link> -{' '}
|
|
<a href={href}>anchor</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|