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]>
71 lines
1.6 KiB
React
71 lines
1.6 KiB
React
'use client'
|
|
|
|
import { usePathname } from 'next/navigation'
|
|
import React from 'react'
|
|
import { useCallback } from 'react'
|
|
|
|
export function Login({ signedIn = false, fallback }) {
|
|
const onClick = useCallback(async () => {
|
|
if (signedIn) {
|
|
await fetch('/api/cookie?name=session', {
|
|
method: 'DELETE',
|
|
credentials: 'same-origin',
|
|
})
|
|
} else {
|
|
await fetch('/api/cookie?name=session', {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
})
|
|
}
|
|
|
|
window.location.reload()
|
|
}, [signedIn])
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<>
|
|
<pre>pathname: {pathname}</pre>
|
|
<button
|
|
id="login"
|
|
className="bg-gray-400 hover:bg-gray-500 px-4 py-2 text-white rounded-md"
|
|
onClick={onClick}
|
|
>
|
|
{fallback ? 'Sign ..' : signedIn ? 'Sign Out' : 'Sign In'}
|
|
</button>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function Delay({ active = false, fallback }) {
|
|
const onClick = useCallback(async () => {
|
|
if (active) {
|
|
await fetch('/api/cookie?name=delay', {
|
|
method: 'DELETE',
|
|
credentials: 'same-origin',
|
|
})
|
|
} else {
|
|
await fetch('/api/cookie?name=delay', {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
})
|
|
}
|
|
|
|
window.location.reload()
|
|
}, [active])
|
|
|
|
return (
|
|
<>
|
|
<pre>
|
|
delay: {fallback ? 'loading...' : active ? 'enabled' : 'disabled'}
|
|
</pre>
|
|
<button
|
|
id="login"
|
|
className="bg-gray-400 hover:bg-gray-500 px-4 py-2 text-white rounded-md"
|
|
onClick={onClick}
|
|
>
|
|
{fallback ? 'Loading...' : active ? 'Disable Delay' : 'Enable Delay'}
|
|
</button>
|
|
</>
|
|
)
|
|
}
|