/react-best-practices

Use React DOM Resource Hints

Impact: HIGH (reduces load time for critical resources)

React DOM provides APIs to hint the browser about resources it will need. These are especially useful in server components to start loading resources before the client even receives the HTML.

• prefetchDNS(href): Resolve DNS for a domain you expect to connect to
• preconnect(href): Establish connection (DNS + TCP + TLS) to a server
• preload(href, options): Fetch a resource (stylesheet, font, script, image) you'll use soon
• preloadModule(href): Fetch an ES module you'll use soon
• preinit(href, options): Fetch and evaluate a stylesheet or script
• preinitModule(href): Fetch and evaluate an ES module

Example (preconnect to third-party APIs):

import { preconnect, prefetchDNS } from 'react-dom'

export default function App() {
  prefetchDNS('https://analytics.example.com')
  preconnect('https://api.example.com')

  return <main>{/* content */}</main>
}

Example (preload critical fonts and styles):

import { preload, preinit } from 'react-dom'

export default function RootLayout({ children }) {
  // Preload font file
  preload('/fonts/inter.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' })

  // Fetch and apply critical stylesheet immediately
  preinit('/styles/critical.css', { as: 'style' })

  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

Example (preload modules for code-split routes):

import { preloadModule, preinitModule } from 'react-dom'

function Navigation() {
  const preloadDashboard = () => {
    preloadModule('/dashboard.js', { as: 'script' })
  }

  return (
    <nav>
      <a href="/dashboard" onMouseEnter={preloadDashboard}>
        Dashboard
      </a>
    </nav>
  )
}

When to use each:

Reference: React DOM Resource Preloading APIs