89 lines
1.7 KiB
Markdown
89 lines
1.7 KiB
Markdown
---
|
|
name: preloading-resources
|
|
description: Teaches resource preloading APIs in React 19 including prefetchDNS, preconnect, preload, and preinit. Use when optimizing initial load or navigation performance.
|
|
allowed-tools: Read, Write, Edit
|
|
version: 1.0.0
|
|
---
|
|
|
|
# Resource Preloading APIs
|
|
|
|
React 19 adds functions for optimizing resource loading.
|
|
|
|
## Available Functions
|
|
|
|
```javascript
|
|
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
|
|
```
|
|
|
|
### prefetchDNS
|
|
|
|
Perform DNS resolution early:
|
|
|
|
```javascript
|
|
function App() {
|
|
prefetchDNS('https://api.example.com');
|
|
prefetchDNS('https://cdn.example.com');
|
|
|
|
return <div>App content</div>;
|
|
}
|
|
```
|
|
|
|
### preconnect
|
|
|
|
Establish connection before needed:
|
|
|
|
```javascript
|
|
function App() {
|
|
preconnect('https://api.example.com');
|
|
|
|
return <div>App content</div>;
|
|
}
|
|
```
|
|
|
|
### preload
|
|
|
|
Preload resources without executing:
|
|
|
|
```javascript
|
|
function App() {
|
|
preload('/font.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
|
|
preload('/hero-image.jpg', { as: 'image' });
|
|
preload('/critical.css', { as: 'style' });
|
|
|
|
return <div>App content</div>;
|
|
}
|
|
```
|
|
|
|
### preinit
|
|
|
|
Preload and execute resource:
|
|
|
|
```javascript
|
|
function App() {
|
|
preinit('/critical.js', { as: 'script' });
|
|
preinit('/critical.css', { as: 'style', precedence: 'high' });
|
|
|
|
return <div>App content</div>;
|
|
}
|
|
```
|
|
|
|
## Use Cases
|
|
|
|
**On Route Hover:**
|
|
```javascript
|
|
function NavLink({ to, children }) {
|
|
const handleMouseEnter = () => {
|
|
preload(`/api/data${to}`, { as: 'fetch' });
|
|
preinit(`/routes${to}.js`, { as: 'script' });
|
|
};
|
|
|
|
return (
|
|
<Link to={to} onMouseEnter={handleMouseEnter}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
```
|
|
|
|
For comprehensive preloading documentation, see: `research/react-19-comprehensive.md` lines 811-834.
|