mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Andrew ClarkandGitHub
f17694d61f
Based on: - https://github.com/vercel/next.js/pull/88834 - https://github.com/vercel/next.js/pull/88989 - https://github.com/vercel/next.js/pull/88998 --- Adds optimistic routing, enabling the client to predict route structure for URLs that haven't been prefetched yet. When navigating to a URL like /blog/post-2, if we've previously learned the pattern from /blog/post-1, we can predict the route structure without waiting for a server response. The client learns route patterns from server responses and builds a trie indexed by URL parts. When a cache miss occurs, we check if the URL matches a known pattern. If so, we create a synthetic cache entry from the template, allowing immediate rendering of loading boundaries. Static siblings (like /blog/featured alongside /blog/[slug]) are tracked to avoid incorrect predictions — we only predict dynamic routes when we're confident no static sibling matches.
36 lines
830 B
TypeScript
36 lines
830 B
TypeScript
'use client'
|
|
|
|
import Link, { type LinkProps } from 'next/link'
|
|
import { useState } from 'react'
|
|
|
|
export function LinkAccordion({
|
|
href,
|
|
children,
|
|
prefetch,
|
|
}: {
|
|
href: LinkProps['href']
|
|
children: React.ReactNode
|
|
prefetch?: LinkProps['prefetch']
|
|
}) {
|
|
// This component controls when prefetching happens by hiding the Link until
|
|
// the checkbox is clicked. Prefetch triggers when the Link enters the viewport.
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
return (
|
|
<>
|
|
<input
|
|
type="checkbox"
|
|
checked={isVisible}
|
|
onChange={() => setIsVisible(!isVisible)}
|
|
data-link-accordion={href}
|
|
/>
|
|
{isVisible ? (
|
|
<Link href={href} prefetch={prefetch}>
|
|
{children}
|
|
</Link>
|
|
) : (
|
|
`${children} (link is hidden)`
|
|
)}
|
|
</>
|
|
)
|
|
}
|