olly/mcma-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auth & admin

Browse Source
This commit is contained in:
ollyhearn
2026-06-03 10:41:53 +03:00
parent 612d0f0125
commit 7dc59fb3c4
120 changed files with 4683 additions and 2159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/vercel-react-best-practices/rules/rendering-resource-hints.md
+24 -20
View File
@@ -21,45 +21,49 @@ React DOM provides APIs to hint the browser about resources it will need. These
**Example (preconnect to third-party APIs):**
```tsx
import { preconnect, prefetchDNS } from 'react-dom'
import { preconnect, prefetchDNS } from 'react-dom';
export default function App() {
prefetchDNS('https://analytics.example.com')
preconnect('https://api.example.com')
prefetchDNS('https://analytics.example.com');
preconnect('https://api.example.com');
return <main>{/* content */}</main>
return <main>{/* content */}</main>;
}
```
**Example (preload critical fonts and styles):**
```tsx
import { preload, preinit } from 'react-dom'
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' })
preload('/fonts/inter.woff2', {
as: 'font',
type: 'font/woff2',
crossOrigin: 'anonymous',
});
// Fetch and apply critical stylesheet immediately
preinit('/styles/critical.css', { as: 'style' })
preinit('/styles/critical.css', { as: 'style' });
return (
<html>
<body>{children}</body>
</html>
)
);
}
```
**Example (preload modules for code-split routes):**
```tsx
import { preloadModule, preinitModule } from 'react-dom'
import { preloadModule, preinitModule } from 'react-dom';
function Navigation() {
const preloadDashboard = () => {
preloadModule('/dashboard.js', { as: 'script' })
}
preloadModule('/dashboard.js', { as: 'script' });
};
return (
<nav>
@@ -67,19 +71,19 @@ function Navigation() {
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 |
| 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](https://react.dev/reference/react-dom#resource-preloading-apis)