infinite-canvas/.agents/skills/vercel-react-best-practices/rules/rendering-resource-hints.md at fb79a1550838dcd65fb343bca9ea88c9b0274dd8

Files

T

HouYunFei fb79a15508 docs(vercel-react-best-practices): 添加 Vercel React 最佳实践规则文档

- 添加 sections 定义文件，包含性能优化各领域分类
- 添加规则模板文件，规范文档结构和标签定义
- 添加异步操作优化规则，包括防止瀑布流、并行化、延迟等待等
- 添加包大小优化规则，包括避免桶式导入、动态导入、预加载等
- 添加服务端性能优化规则，包括 API 路

2026-05-21 15:22:11 +08:00

2.5 KiB

Raw Blame History

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use React DOM Resource Hints	HIGH	reduces load time for critical resources	rendering, preload, preconnect, prefetch, resource-hints

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:

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

Reference: React DOM Resource Preloading APIs

2.5 KiB Raw Blame History

Use React DOM Resource Hints

2.5 KiB

Raw Blame History