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 #
This commit is contained in:
Jack Hsu 2024-07-05 09:29:08 -04:00 committed by GitHub
parent 653cad2492
commit c7878533ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
33 changed files with 97 additions and 6 deletions

View File

@ -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" />

View File

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

View File

@ -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>

View File

@ -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({

View File

@ -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.

View File

@ -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"

View File

@ -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>

View File

@ -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

View File

@ -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}

View File

@ -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}

View File

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

View File

@ -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>

View File

@ -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 ? (

View File

@ -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>

View File

@ -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>

View File

@ -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 ? (

View File

@ -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>

View File

@ -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>

View File

@ -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>
.

View File

@ -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" />

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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"
>

View File

@ -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}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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">

View File

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

View File

@ -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}