script & link components

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Resource hints - ReactDOM preload, preconnect, prefetchDNS

For resource hints not directly supported by Metadata API: use `ReactDOM.preload(href, { as })` to start loading a resource early, `ReactDOM.preconnect(href, { crossOrigin })` to preemptively initiate a connection, or `ReactDOM.prefetchDNS(href)` to resolve a domain name before resources are requested. These are only supported in Client Components.

Link component prefetching behavior

Next.js automatically prefetches routes linked with the <Link> component when they enter the user's viewport. Prefetching is the process of loading a route in the background before the user navigates to it. For static routes, the full route is prefetched. For dynamic routes, prefetching is skipped or the route is partially prefetched if loading.tsx is present.

Link prefetch prop to disable prefetching

You can opt out of prefetching by setting the prefetch prop to false on the <Link> component. When prefetch is set to false, static routes will only be fetched when the user clicks the link, and dynamic routes will need to be rendered on the server first before the client can navigate to it.

Link prefetch with null value for hover-only prefetching

Setting prefetch to null on the <Link> component enables prefetching on hover only, limiting prefetching to routes the user is more likely to visit rather than all links in the viewport. This reduces resource usage without fully disabling prefetch.

Client-side transitions with Link component

Next.js performs client-side transitions using the <Link> component instead of full page reloads. It keeps shared layouts and UI, replaces the current page with the prefetched loading state or a new page if available, and handles scrolling to the top of the page. This makes server-rendered apps feel like client-rendered apps.

Scroll padding offset for sticky headers with Link navigation

If content scrolls behind a sticky or fixed header after Link navigation, you can fix this with CSS scroll-padding-top property.

Example of hover-only prefetching with Link

'use client' import Link from 'next/link' import { useState } from 'react' function HoverPrefetchLink({ href, children, }: { href: string children: React.ReactNode }) { const [active, setActive] = useState(false) return ( <Link href={href} prefetch={active ? null : false} onMouseEnter={() => setActive(true)} > {children} </Link> ) } This example shows how to implement prefetch-on-hover behavior by setting prefetch to null when active and false otherwise, combined with onMouseEnter event handler.

Give your agent this brain