Subchapter 3.47

Rendering Resource Hints

rules/rendering-resource-hints.mdMarkdown2 KBView on GitHub

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.

Rendering Resource Hints · Vercel React Best Practices · vercel-labs/agent-skills · Skills Docs

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

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

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

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>
  )
}

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>
  )
}

API	Use case
`prefetchDNS`	Third-party domains you’ll connect to later
`preconnect`	APIs or CDNs you’ll fetch from immediately
`preload`	Critical resources needed for current page
`preloadModule`	JS modules for likely next navigation
`preinit`	Stylesheets/scripts that must execute early
`preinitModule`	ES modules that must execute early