Menu

Prefetch on intent, not on sight: a <Link> wrapper for Next.js
📰

Prefetch on intent, not on sight: a <Link> wrapper for Next.js

DEV Community: react·Jonás Javier Encarnación·about 6 hours ago
#cBBwzoZS
#devtoreact#devto#dev#prefetch#article
Reading 0:00
15s threshold

My portfolio is a 3D map with six destinations. On the home page they sit in a

rail under the scene. On every other page they sit in the header. In both

places they are plain Next.js <Link> s, so the HTML works without JavaScript.

And <Link> prefetches every route as soon as it enters the viewport. Six

links that are always visible means six routes prefetched on every page,

always.

The symptom

I measured it on next start , on the home page. 2.1 seconds after opening it,

the browser had asked for the RSC payload of all six pages: 565 KB. That

payload carries whatever those pages declare with preload : the sky and eight

photos of the About page, the Projects room, the Experiments window, plus four

stylesheets from other pages. In total, 1.3 MB of other pages, requested

before the 872 KB three.js chunk that draws the scene the visitor is actually

looking at.

The console was the second symptom. Chrome prints "preloaded but not used" for

every preload nobody consumes.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.