Post

Instant Insights gives you options for how to make a navigation instant: • Stream the data behind a <𝚂𝚞𝚜𝚙𝚎𝚗𝚜𝚎> boundary • Cache the data with '𝚞𝚜𝚎 𝚌𝚊𝚌𝚑𝚎' Or allow the navigation to Block with 𝚎𝚡𝚙𝚘𝚛𝚝 𝚌𝚘𝚗𝚜𝚝 𝚒𝚗𝚜𝚝𝚊𝚗𝚝 = 𝚏𝚊𝚕𝚜𝚎.

To guarantee instant navigations, the client must immediately render something when a link is clicked. Previously, Next.js tried to solve this by prefetching every link, a flurry of requests as you scrolled. Many of you told us this looked ridiculous, and frankly, we agree.

0 reposts6 likes

So, we're borrowing a trick from single-page apps. Next.js now prefetches one reusable shell per route and caches it on the client, instead of a separate request per link. A click renders the prefetched shell instantly while the rest of the page streams in from the server.

Instant Navigations builds on Cache Components. To migrate an existing app, install our Skill: npx skills add vercel/next.js --skill next-cache-components-adoption Then ask your agent to adopt Cache Components using the Skill.