| 1 | --- |
| 2 | title: Use React DOM Resource Hints |
| 3 | impact: HIGH |
| 4 | impactDescription: reduces load time for critical resources |
| 5 | tags: rendering, preload, preconnect, prefetch, resource-hints |
| 6 | --- |
| 7 | |
| 8 | ## Use React DOM Resource Hints |
| 9 | |
| 10 | **Impact: HIGH (reduces load time for critical resources)** |
| 11 | |
| 12 | 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. |
| 13 | |
| 14 | - **`prefetchDNS(href)` |
| 15 | - **`preconnect(href)` |
| 16 | - **`preload(href, options)` |
| 17 | - **`preloadModule(href)` |
| 18 | - **`preinit(href, options)` |
| 19 | - **`preinitModule(href)` |
| 20 | |
| 21 | **Example (preconnect to third-party APIs):** |
| 22 | |
| 23 | ```tsx |
| 24 | import { preconnect, prefetchDNS |
| 25 | |
| 26 | export default function App |
| 27 | prefetchDNS("https://analytics.example.com"); |
| 28 | preconnect("https://api.example.com"); |
| 29 | |
| 30 | return <main>{ |
| 31 | } |
| 32 | ``` |
| 33 | |
| 34 | **Example (preload critical fonts and styles):** |
| 35 | |
| 36 | ```tsx |
| 37 | import { preload, preinit |
| 38 | |
| 39 | export default function RootLayout |
| 40 | // Preload font file |
| 41 | preload("/fonts/inter.woff2", |
| 42 | |
| 43 | // Fetch and apply critical stylesheet immediately |
| 44 | preinit("/styles/critical.css", |
| 45 | |
| 46 | return ( |
| 47 | <html> |
| 48 | <body>{children} |
| 49 | </html> |
| 50 | ); |
| 51 | } |
| 52 | ``` |
| 53 | |
| 54 | **Example (preload modules for code-split routes):** |
| 55 | |
| 56 | ```tsx |
| 57 | import { preloadModule, preinitModule |
| 58 | |
| 59 | function Navigation() { |
| 60 | const preloadDashboard = |
| 61 | preloadModule("/dashboard.js", |
| 62 | }; |
| 63 | |
| 64 | return ( |
| 65 | <nav> |
| 66 | <a href=" |
| 67 | Dashboard |
| 68 | </a> |
| 69 | </nav> |
| 70 | ); |
| 71 | } |
| 72 | ``` |
| 73 | |
| 74 | **When to use each:** |
| 75 | |
| 76 | | API | Use case | |
| 77 | | --------------- | ------------------------------------------- | |
| 78 | | `prefetchDNS` | Third-party domains you'll connect to later | |
| 79 | | `preconnect` | APIs or CDNs you'll fetch from immediately | |
| 80 | | `preload` | Critical resources needed for current page | |
| 81 | | `preloadModule` | JS modules for likely next navigation | |
| 82 | | `preinit` | Stylesheets/scripts that must execute early | |
| 83 | | `preinitModule` | ES modules that must execute early | |
| 84 | |
| 85 | Reference: [React DOM Resource Preloading APIs](https://react.dev/reference/react-dom#resource-preloading-apis |