javascript / expert
Snippet
Programmatisches Vorladen von Ressourcen mit ReactDOM
Um einen LCP (Largest Contentful Paint) von unter einer Sekunde zu erreichen, verwenden Experten die `preload`-Funktion von `react-dom` innerhalb von Server Components. Dies injiziert `<link rel="preload">`-Tags frühzeitig in den Dokumentenstream und signalisiert dem Browser, hochpriorisierte Assets wie Hero-Images oder kritische Schriften abzurufen, noch bevor das Haupt-Hydration-Bundle überhaupt ausgeführt wird. Dies ist eine Low-Level-Optimierung, welche die Einschränkungen der standardmäßigen komponentenbasierten Erkennung umgeht.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { preload } from 'react-dom';export default function BlogPost({ post }) {preload(post.coverImage, { as: 'image' });preload('/fonts/inter.woff2', { as: 'font', type: 'font/woff2' });return (<article><h1>{post.title}</h1>{/* ... */}</article>);}
nextjs
Erklärung
1
import { preload } from 'react-dom';
Importiert das von React bereitgestellte Low-Level-Preloading-Utility zur Ressourcenoptimierung.
2
preload(post.coverImage, { as: 'image' });
Weist den Browser an, den Download des Titelbildes sofort zu priorisieren.
3
as: 'font', type: 'font/woff2'
Gibt den Ressourcentyp und den MIME-Typ an, um sicherzustellen, dass der Browser das Preload korrekt verarbeitet.