docs(misc): disable prefetch on page load for links (#26837)

This PR changes `<Link>` to use `prefetch={false}` in the following
components:

1. Header
2. Sidebar
3. Docs header
4. Markdown content

This means that prefetch happens on hover of the link rather than page
load, and will reduce the amount of edge requests made from the app.

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx

@@ -54,6 +54,7 @@ function CategoryBox({ category }: { category: RelatedDocumentsCategory }) {
             <Link
               href={d.path}
               className="flex flex-grow items-center justify-between no-underline hover:text-sky-600 hover:underline dark:hover:text-sky-400"
+              prefetch={false}
             >
               <span>{d.name}</span>
               <ArrowRightIcon className="h-4 w-4 text-slate-500 dark:text-slate-400" />

nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx

@@ -93,6 +93,7 @@ export function TableOfContents({
                         'pl-6': item.level === 3,
                       }
                     )}
+                    prefetch={false}
                   >
                     {item.level === 1 ? 'Overview' : item.title}
                   </Link>

nx-dev/feature-package-schema-viewer/src/lib/content.tsx

@@ -129,6 +129,7 @@ export function Content({
             className="relative mx-4 inline-flex rounded-md border border-green-100 bg-green-50 px-4 py-2 text-xs font-medium text-green-600 dark:border-green-900 dark:bg-green-900/30 dark:text-green-400"
             href="/recipes/other/rescope"
             title="Nx 16 package name changes"
+            prefetch={false}
           >
             Rescope @nrwl to @nx
           </Link>

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -20,7 +20,11 @@ function Hit({
   hit: InternalDocSearchHit | StoredDocSearchHit;
   children: ReactNode;
 }): JSX.Element {
-  return <Link href={hit.url}>{children}</Link>;
+  return (
+    <Link href={hit.url} prefetch={false}>
+      {children}
+    </Link>
+  );
 }
 
 export function AlgoliaSearch({

nx-dev/nx-dev/pages/changelog.tsx

@@ -240,7 +240,11 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
             </h1>
             <p className="mt-4">
               All the Nx goodies in one page, sorted by release. See our{' '}
-              <Link className="underline" href="/reference/releases">
+              <Link
+                className="underline"
+                href="/reference/releases"
+                prefetch={false}
+              >
                 release page
               </Link>{' '}
               for information about the release cycle and LTS policy.

nx-dev/nx-dev/pages/nx-api/index.tsx

@@ -114,7 +114,11 @@ export default function Packages({
                     <p>
                       In version 16, we have rescoped our packages to{' '}
                       <code>@nx/*</code> from <code>@nrwl/*</code>.{' '}
-                      <Link href="/recipes/other/rescope" className="underline">
+                      <Link
+                        href="/recipes/other/rescope"
+                        className="underline"
+                        prefetch={false}
+                      >
                         Read more about the rescope ≫
                       </Link>
                     </p>
@@ -129,6 +133,7 @@ export default function Packages({
                           key={'ref-' + pkg.name}
                           href={pkg.path}
                           className="group relative flex items-center gap-3 rounded-md border border-slate-200 bg-slate-50/40 p-4 text-sm capitalize shadow-sm transition hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+                          prefetch={false}
                         >
                           <img
                             className="h-5 w-5 object-cover opacity-75 dark:invert"

nx-dev/nx-dev/pages/tips.tsx

@@ -43,6 +43,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/getting-started/intro"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Intro to Nx
           </Link>
@@ -78,6 +79,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/concepts/integrated-vs-package-based"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Types of Repos Guide
           </Link>
@@ -109,6 +111,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/ci/features/distribute-task-execution"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Nx Agents
           </Link>
@@ -120,6 +123,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/ci/intro/ci-with-nx"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             CI with Nx
           </Link>
@@ -153,6 +157,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/recipes/adopting-nx/adding-to-existing-project"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Add Nx to an Existing Project
           </Link>
@@ -187,6 +192,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/concepts/module-federation/micro-frontend-architecture"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Micro Frontends with Nx
           </Link>
@@ -211,18 +217,21 @@ const tips: NewYearTip[] = [
           <Link
             href="/getting-started/tutorials/react-standalone-tutorial"
             className="m-4 w-20"
+            prefetch={false}
           >
             {frameworkIcons.react.image}
           </Link>
           <Link
             href="/getting-started/tutorials/angular-standalone-tutorial"
             className="m-4 w-20"
+            prefetch={false}
           >
             {frameworkIcons.angular.image}
           </Link>
           <Link
             href="/getting-started/tutorials/vue-standalone-tutorial"
             className="m-4 w-20"
+            prefetch={false}
           >
             {frameworkIcons.vue.image}
           </Link>
@@ -232,6 +241,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/showcase/example-repos"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Nx with your Favorite Tech
           </Link>
@@ -266,6 +276,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/extending-nx/recipes/create-install-package"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Build Your Own CLI
           </Link>
@@ -304,6 +315,7 @@ const tips: NewYearTip[] = [
           <Link
             href="https://go.nx.dev/nx-agents-ea"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Sign up now for early access.
           </Link>
@@ -313,6 +325,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/ci/features/distribute-task-execution"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Nx Agents
           </Link>
@@ -347,6 +360,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/recipes/tips-n-tricks/standalone-to-integrated"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             convert a standalone app repo to a monorepo
           </Link>
@@ -378,6 +392,7 @@ const tips: NewYearTip[] = [
           <Link
             href="https://blog.nrwl.io/evergreen-tooling-more-than-just-codemods-fc68f32ce605"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Evergreen Tooling
           </Link>
@@ -388,6 +403,7 @@ const tips: NewYearTip[] = [
           <Link
             href="/features/automate-updating-dependencies"
             className="text-slate-900 underline dark:text-slate-100"
+            prefetch={false}
           >
             Automate Updating Dependencies
           </Link>

nx-dev/ui-blog/src/lib/blog-details.tsx

@@ -46,6 +46,7 @@ export function BlogDetails({ post }: BlogDetailsProps) {
         <Link
           href="/blog"
           className="flex w-20 shrink-0 items-center gap-2 text-slate-400 hover:text-slate-800 dark:text-slate-600 dark:hover:text-slate-200"
+          prefetch={false}
         >
           <ChevronLeftIcon className="h-3 w-3" />
           Blog

nx-dev/ui-blog/src/lib/blog-entry.tsx

@@ -28,6 +28,7 @@ export function BlogEntry({ post }: BlogEntryProps) {
           href={`/blog/${post.slug}`}
           title={post.title}
           className="text-balance text-lg font-semibold text-slate-900 dark:text-white"
+          prefetch={false}
         >
           <span className="absolute inset-0" aria-hidden="true" />
           {post.title}

nx-dev/ui-blog/src/lib/more-blogs.tsx

@@ -30,6 +30,7 @@ export function MoreBlogs({ blogs }: MoreBlogsProps) {
               href={`/blog/${post.slug}`}
               key={post.slug}
               className="relative flex items-center gap-6 border-b border-slate-200 py-5 text-sm before:absolute before:inset-x-[-16px] before:inset-y-[-2px] before:z-[-1] before:rounded-xl before:bg-slate-200 before:opacity-0 last:border-0 before:hover:opacity-100 dark:border-slate-800 dark:before:bg-slate-800/50"
+              prefetch={false}
             >
               <span className="w-1/2 flex-none text-balance font-medium text-slate-500 sm:w-5/12 dark:text-white">
                 {post.title}

nx-dev/ui-common/src/lib/button.tsx

@@ -110,6 +110,7 @@ export const ButtonLink = forwardRef(function (
       href={href}
       title={title}
       className={getLayoutClassName(className)}
+      prefetch={false}
       {...props}
     >
       <ButtonInner variant={variant} size={size}>

nx-dev/ui-common/src/lib/footer.tsx

@@ -165,6 +165,7 @@ export function Footer(): JSX.Element {
                   href={item.href}
                   title={item.label}
                   className="text-sm text-slate-500 hover:text-slate-600 dark:hover:text-slate-400"
+                  prefetch={false}
                 >
                   <span className="sr-only">{item.name}</span>
                   <item.icon className="h-6 w-6" aria-hidden="true" />
@@ -187,6 +188,7 @@ export function Footer(): JSX.Element {
                       <Link
                         href={item.href}
                         className="text-sm text-slate-500 hover:text-slate-600 dark:hover:text-slate-400"
+                        prefetch={false}
                       >
                         {item.name}
                       </Link>
@@ -204,6 +206,7 @@ export function Footer(): JSX.Element {
                       <Link
                         href={item.href}
                         className="text-sm text-slate-500 hover:text-slate-600 dark:hover:text-slate-400"
+                        prefetch={false}
                       >
                         {item.name}
                       </Link>
@@ -223,6 +226,7 @@ export function Footer(): JSX.Element {
                       <Link
                         href={item.href}
                         className="text-sm text-slate-500 hover:text-slate-600 dark:hover:text-slate-400"
+                        prefetch={false}
                       >
                         {item.name}
                       </Link>
@@ -240,6 +244,7 @@ export function Footer(): JSX.Element {
                       <Link
                         href={item.href}
                         className="text-sm text-slate-500 hover:text-slate-600 dark:hover:text-slate-400"
+                        prefetch={false}
                       >
                         {item.name}
                       </Link>

nx-dev/ui-common/src/lib/headers/default-menu-item.tsx

@@ -36,6 +36,7 @@ export function DefaultMenuItem({
           title={item.name}
           target={hasExternalLink ? '_blank' : '_self'}
           className="text-sm font-medium text-slate-900 dark:text-slate-200"
+          prefetch={false}
         >
           {item.name}
           {item.isNew ? (

nx-dev/ui-common/src/lib/headers/documentation-header.tsx

@@ -43,6 +43,7 @@ function Menu({ tabs }: { tabs: any[] }): JSX.Element {
               'whitespace-nowrap border-b-2 py-2 text-sm font-medium'
             )}
             aria-current={tab.current ? 'page' : undefined}
+            prefetch={false}
           >
             {tab.name}
           </Link>
@@ -203,6 +204,7 @@ export function DocumentationHeader({
           <Link
             href="/"
             className="flex flex-grow items-center px-4 text-slate-900 lg:px-0 dark:text-white"
+            prefetch={false}
           >
             <span className="sr-only">Nx</span>
             <NxIcon aria-hidden="true" className="h-8 w-8" />
@@ -210,6 +212,7 @@ export function DocumentationHeader({
           <Link
             href="/getting-started/intro"
             className="ml-2 hidden items-center px-4 text-slate-900 lg:flex lg:px-0 dark:text-white"
+            prefetch={false}
           >
             <span className="text-xl font-bold uppercase tracking-wide">
               Docs
@@ -320,6 +323,7 @@ export function DocumentationHeader({
               href="/getting-started/intro"
               title="Documentation"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
             >
               Docs
             </Link>
@@ -327,6 +331,7 @@ export function DocumentationHeader({
               href="/blog"
               title="Blog"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
             >
               Blog
             </Link>
@@ -391,6 +396,7 @@ export function DocumentationHeader({
               className="hidden cursor-pointer px-3 py-2 text-sm font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
               title="Contact Us"
               href="/contact"
+              prefetch={false}
             >
               Contact
             </Link>

nx-dev/ui-common/src/lib/headers/header.tsx

@@ -54,6 +54,7 @@ export function Header(): JSX.Element {
           <Link
             href="/"
             className="mr-4 flex items-center text-slate-900 dark:text-white"
+            prefetch={false}
           >
             <span className="sr-only">Nx</span>
             <NxIcon aria-hidden="true" className="h-8 w-8" />
@@ -156,6 +157,7 @@ export function Header(): JSX.Element {
               href="/getting-started/intro"
               title="Documentation"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
             >
               Docs
             </Link>
@@ -163,6 +165,7 @@ export function Header(): JSX.Element {
               href="/blog"
               title="Blog"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
+              prefetch={false}
             >
               Blog
             </Link>
@@ -227,6 +230,7 @@ export function Header(): JSX.Element {
               className="hidden cursor-pointer px-3 py-2 font-medium leading-tight hover:text-blue-500 md:inline-flex dark:text-slate-200 dark:hover:text-sky-500"
               title="Contact Us"
               href="/contact"
+              prefetch={false}
             >
               Contact
             </Link>
@@ -260,6 +264,7 @@ export function Header(): JSX.Element {
           <Link
             href="/"
             className="flex items-center text-slate-900 dark:text-white"
+            prefetch={false}
           >
             <span className="sr-only">Nx</span>
             <NxIcon aria-hidden="true" className="h-8 w-8" />
@@ -315,6 +320,7 @@ export function Header(): JSX.Element {
                             <Link
                               href="/"
                               className="flex items-center text-slate-900 dark:text-white"
+                              prefetch={false}
                             >
                               <svg
                                 role="img"
@@ -435,6 +441,7 @@ export function Header(): JSX.Element {
                             href="/getting-started/intro"
                             title="Documentation"
                             className="block py-4 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500"
+                            prefetch={false}
                           >
                             Docs
                           </Link>
@@ -442,6 +449,7 @@ export function Header(): JSX.Element {
                             href="/blog"
                             title="Blog"
                             className="block py-4 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500"
+                            prefetch={false}
                           >
                             Blog
                           </Link>
@@ -501,6 +509,7 @@ export function Header(): JSX.Element {
                             href="/contact"
                             title="Contact"
                             className="block py-4 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500"
+                            prefetch={false}
                           >
                             Contact
                           </Link>

nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx

@@ -34,6 +34,7 @@ export function MobileMenuItem({
           title={item.name}
           target={hasExternalLink ? '_blank' : '_self'}
           className="text-sm font-medium text-slate-900 dark:text-slate-200"
+          prefetch={false}
         >
           {item.name}
           {item.isNew ? (

nx-dev/ui-common/src/lib/plugin-card.tsx

@@ -47,6 +47,7 @@ export function PluginCard({
           target={isOfficial ? undefined : '_blank'}
           rel={isOfficial ? undefined : 'noreferrer'}
           className="flex grow flex-col focus:outline-none"
+          prefetch={false}
         >
           <span className="absolute inset-0" aria-hidden="true" />
           <p className="mb-2 line-clamp-3 grow text-sm">{description}</p>

nx-dev/ui-common/src/lib/sidebar.tsx

@@ -103,7 +103,11 @@ function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
         onClick={handleCollapseToggle}
       >
         {item.disableCollapsible ? (
-          <Link href={item.path as string} className="hover:underline">
+          <Link
+            href={item.path as string}
+            className="hover:underline"
+            prefetch={false}
+          >
             {item.name}
           </Link>
         ) : (
@@ -134,6 +138,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
                   className={cx(
                     'relative block py-1 text-slate-500 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300'
                   )}
+                  prefetch={false}
                 >
                   <span
                     className={cx('relative', {
@@ -286,6 +291,7 @@ export function SidebarMobile({
                   <Link
                     href="/"
                     className="flex flex-grow items-center px-4 text-slate-900 lg:px-0 dark:text-white"
+                    prefetch={false}
                   >
                     <span className="sr-only">Nx</span>
                     <NxIcon aria-hidden="true" className="h-8 w-8" />
@@ -307,6 +313,7 @@ export function SidebarMobile({
                           'whitespace-nowrap p-4 text-center text-sm font-medium'
                         )}
                         aria-current={section.current ? 'page' : undefined}
+                        prefetch={false}
                       >
                         {section.name}
                       </Link>
@@ -324,6 +331,7 @@ export function SidebarMobile({
                           'whitespace-nowrap p-4 text-center text-sm font-medium'
                         )}
                         aria-current={section.current ? 'page' : undefined}
+                        prefetch={false}
                       >
                         {section.name}
                       </Link>

nx-dev/ui-community/src/lib/connect-with-us.tsx

@@ -19,7 +19,11 @@ export function ConnectWithUs(): JSX.Element {
           </p>
           <p className="py-4">
             Looking for community plugins? Find them listed in the{' '}
-            <Link href="/plugin-registry" className="font-semibold underline">
+            <Link
+              href="/plugin-registry"
+              className="font-semibold underline"
+              prefetch={false}
+            >
               plugin registry
             </Link>
             .

nx-dev/ui-contact/src/lib/contact-links.tsx

@@ -145,6 +145,7 @@ export function ContactLinks(): JSX.Element {
             href="/getting-started/intro"
             title="Nx documentation"
             className="mt-2 flex items-center gap-2 text-sm text-slate-500 transition hover:text-slate-800 dark:hover:text-slate-400"
+            prefetch={false}
           >
             <span>Nx docs</span>
             <ChevronRightIcon aria-hidden="true" className="h-3 w-3" />

nx-dev/ui-enterprise/src/lib/bento-grid.tsx

@@ -60,6 +60,7 @@ export const BentoGridItem = ({
             href={url}
             title="Learn more"
             className="float-right text-sm font-medium transition duration-200 group-hover/bento:text-blue-500 group-hover/bento:dark:text-sky-500"
+            prefetch={false}
           >
             <span className="group absolute inset-0" />
 

nx-dev/ui-enterprise/src/lib/call-to-action.tsx

@@ -62,6 +62,7 @@ export function CallToAction(): JSX.Element {
             href="/contact/engineering"
             title="Talk to the engineering team"
             className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
+            prefetch={false}
           >
             Talk to engineering
           </Link>
@@ -71,6 +72,7 @@ export function CallToAction(): JSX.Element {
               href="/contact/sales"
               title="Talk to the sales team"
               className="font-semibold underline"
+              prefetch={false}
             >
               Speak directly to sales
             </Link>

nx-dev/ui-enterprise/src/lib/hero.tsx

@@ -33,6 +33,7 @@ export function Hero(): JSX.Element {
                 href="/contact/sales"
                 title="Talk to the sales team"
                 className="font-semibold underline"
+                prefetch={false}
               >
                 Speak directly to sales
               </Link>

nx-dev/ui-home/src/lib/extensible-and-integrated.tsx

@@ -37,6 +37,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
               href="/getting-started/editor-setup"
               title="Install VSCode's native extension for Nx"
               className="font-medium text-blue-500 dark:text-sky-500"
+              prefetch={false}
             >
               VSCode
             </Link>{' '}
@@ -45,6 +46,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
               href="/getting-started/editor-setup"
               className="font-medium text-blue-500 dark:text-sky-500"
               title="Install JetBrains' native plugin for Nx"
+              prefetch={false}
             >
               JetBrains
             </Link>{' '}
@@ -52,6 +54,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
             <Link
               href="/getting-started/editor-setup#neovim"
               className="font-medium text-blue-500 dark:text-sky-500"
+              prefetch={false}
             >
               Neovim
             </Link>
@@ -70,6 +73,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
               href="https://nx.app/?utm_source=nx.dev"
               title="Nx Cloud: Distributed Task execution & Caching"
               className="font-medium text-blue-500 dark:text-sky-500"
+              prefetch={false}
               target="_blank"
               rel="noreferrer"
             >

nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx

@@ -92,7 +92,7 @@ export function IdeIntegrationTab(): JSX.Element {
             </div>
             <div className="mt-3 sm:ml-3 sm:mt-0">
               <h3 className="text-sm font-medium">{feature.name}</h3>
-              <Link href={feature.link}>
+              <Link href={feature.link} prefetch={false}>
                 <span className="absolute inset-0" aria-hidden="true" />
                 <p className="mt-2 text-sm text-slate-500">
                   {feature.description}

nx-dev/ui-home/src/lib/hero.tsx

@@ -33,6 +33,7 @@ export function Hero(): JSX.Element {
               href="/ci/features/distribute-task-execution"
               title="Discover Nx Agents"
               className="font-semibold text-blue-500 dark:text-sky-500"
+              prefetch={false}
             >
               <span className="absolute inset-0" aria-hidden="true"></span>Read
               more <span aria-hidden="true">→</span>

nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx

@@ -116,6 +116,7 @@ export function MigrationsAndCodeGeneration(): JSX.Element {
                   <Link
                     href="https://nx.dev/features/automate-updating-dependencies"
                     className="ml-2 underline"
+                    prefetch={false}
                   >
                     https://nx.dev/features/automate-updating-dependencies
                   </Link>

nx-dev/ui-home/src/lib/monorepo-styles.tsx

@@ -30,6 +30,7 @@ export function MonorepoStyles(): JSX.Element {
                 href="/recipes/adopting-nx/adding-to-monorepo"
                 title="Install VSCode's native extension for Nx"
                 className="font-medium text-blue-500 dark:text-sky-500"
+                prefetch={false}
               >
                 Add Nx on top!
               </Link>{' '}
@@ -41,6 +42,7 @@ export function MonorepoStyles(): JSX.Element {
                 href="/extending-nx"
                 title="Install VSCode's native extension for Nx"
                 className="font-medium text-blue-500 dark:text-sky-500"
+                prefetch={false}
               >
                 powerful plugins
               </Link>

nx-dev/ui-home/src/lib/nx-with-ci.tsx

@@ -149,6 +149,7 @@ export function NxWithCi(): JSX.Element {
                   <Link
                     href="/ci/features/remote-cache"
                     title="Discover Nx Replay"
+                    prefetch={false}
                   >
                     <span className="absolute inset-0"></span>Nx Replay
                   </Link>

nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx

@@ -6,6 +6,7 @@ export function CustomLink(props: any) {
 
   return (
     <Link
+      prefetch={false}
       {...props}
       passHref
       target={target}

nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx

@@ -83,6 +83,7 @@ export function Cards({
           <Link
             className="group flex items-center whitespace-nowrap border-transparent px-4 py-0 text-sm font-semibold no-underline transition-all duration-200 ease-in-out hover:text-slate-900 dark:hover:text-sky-400"
             href={moreLink}
+            prefetch={false}
           >
             Browse more
             <span
@@ -117,6 +118,7 @@ export function LinkCard({
       href={url}
       className="no-prose relative col-span-1 flex flex-col items-center rounded-md border border-slate-200 bg-slate-50/40 p-4 text-center font-semibold shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-100 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
       style={{ textDecorationLine: 'none' }}
+      prefetch={false}
     >
       {icon && (
         <div
@@ -177,6 +179,7 @@ export function Card({
       href={url}
       title={title}
       className="group flex flex-col items-stretch rounded-md border border-slate-200 bg-slate-50/40 text-sm no-underline shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+      prefetch={false}
     >
       {!!hasYoutubeId && (
         <div className="max-h-24">

nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx

@@ -207,6 +207,7 @@ export function Persona({
           title={title}
           aria-hidden="true"
           className="absolute inset-0"
+          prefetch={false}
         />
       </div>
     </section>

nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx

@@ -14,6 +14,7 @@ export function Pill({
         <Link
           href={url}
           className="flex items-center font-semibold no-underline group-hover:underline"
+          prefetch={false}
         >
           <span className="absolute inset-0" aria-hidden="true"></span>
           {children}