Beta Docs: Metadata page incorrectly uses ReactDOM.preload() for <link rel="preconnect" /> example

[GeorgeIpsum]

What is the improvement or update you wish to see?

On https://beta.nextjs.org/docs/api-reference/metadata#link-relpreconnect:

The example listed here used ReactDOM.preload instead of ReactDOM.preconnect here. As far as I know, this is incorrect, but the appropriate function can just be swapped in. Super easy fix! (Didn't see where if possible to create a PR for beta docs changes)

Is there any context that might help us understand?

This should be it

Does the docs page already exist? Please link to it.

https://beta.nextjs.org/docs/api-reference/metadata#link-relpreconnect

[Maroben]

The function ReactDOM.preload also does not seem to exist. See: https://react.dev/reference/react-dom

I think the documentation example file should probably look like this.

'use client'

import ReactDOM from 'react-dom/client'

export function PreloadResources() {
  const head = ReactDOM.createRoot(document.head)

  head.render(<link rel='preload' href='...' />)
  head.render(<link rel='preconnect' href='...' />)
  head.render(<link rel='prefetchDNS' href='...' />)

  return null
}

I wonder since we would render link tags here. Would it also be okay to add the rel='stylesheet' at this point or is it still preferred to directly import them like mentioned in the docs?

[delbaoliveira]

Good catch @GeorgeIpsum, I'll update the docs shortly.

@Maroben these are relatively new React methods that haven't been documented yet, here's the PR: facebook/react#26237

[gtomitsuka]

I'm trying to use this, but PreloadResources seems unused. Do I need to import app/preload-resources.tsx or add it to a config somewhere? PreloadResources or preload-resources.tsx are nowhere to be found in the source code either.

[HamAndRock]

I see app router is still using tags for Next/Image prefetches. I assume it should be replace with ReactDOM.preload().

Here: https://github.com/vercel/next.js/blob/18d112fb5ca62bdb7b1361a65c7e33615d16bdd1/packages/next/src/client/image.tsx#LL959C12-L959C12

#50694

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.