A different way to instant navigation in RSC #13

It's clear that people refer to Next.js and RSC interchangeably. Any trouble they have with Next.js they blame on RSC. The truth is that Next.js is a very opinionated framework and most of those opinions have absolutely nothing to do with RSC. Take instant navigation, for example.

Next.js announced instant navigation is coming in 16.3. Their implementation relies heavily on caching and prefetching. But this isn't the only way to do instant navigation in RSC. I've just released instant navigation for RSC in the Navigation router and there's no caching or prefetching involved.

In the Navigation router, scenes are composed of server component views that can update independently in response to URL changes. The refetch prop indicates which URL parameter changes the view listens out for.

<SceneView active="people" refetch={['name']}>
 <List />
</SceneView>

To turn that into an instant navigation you wrap it in a client component view and add a suspense fallback to the server component. The Shell client component is shown instantly when navigating to the 'people' scene.

<SceneView active="people" client>
 <Shell>
 <SceneView active="people" refetch={['name']} fallback={<h2>loading...</h2>}>
 <List />
 </SceneView>
 </Shell>
</SceneView>

The Navigation router doesn't need to cache or prefetch the shell because RSC bundlers automatically include top-level client components in the initial bundle. You can see it in action in the video below or try it out in the sample (use dev tools to slow down the network and see that the navigation remains instant).