How <Link prefetch="render" /> works?

[emadabdulrahim]

If I make the links on the homepage to have prefetch="render", does it mean that the home page is going to render first completely, then all rendered Links with prefetch="render" will make HTTP requests to prefetch the resource(s)?

I want to make sure that prefetch="render" won't slow down the page load for the page that is rendering those links with prefetch prop.

[kiliman]

No, it means that for each <Link prefetch="render"/>, a <PrefetchPageLinks/> component will be rendered. This component simply adds a new <link rel="prefetch"/> element to start the prefetch. So when the browser processes the page, it will start prefetching those links in the background.

Typically you would add prefetch="intent" so the browser would only prefetch when the user hovers over the link. With prefetch="render", those resources will be prefetched automatically as soon as the page is rendered.

Just remember, prefetch only occurs in the browser. It does not affect SSR.

[emadabdulrahim]

Cool. I guess I wanted to prefetch top 5 articles on a homepage, but not if it's at the expense of slowing down rendering the homepage. But from my understanding, the browser will prefetch (with link rel="prefetch") only when the page has rendered; thus, not impacting the load time of the homepage.

[kiliman]

Yes. Prefetching is a background task. As long as the current page doesn't require the prefetched resources, then it should not impact rendering.