vercel-react-best-practices

Vercel React Best Practices

Umfassender Leitfaden zur Leistungsoptimierung für React- und Next.js-Anwendungen, gepflegt von Vercel. Enthält 70 Regeln in 8 Kategorien, priorisiert nach Auswirkung, zur Unterstützung automatisierter Refaktorisierung und Codegenerierung.

Wann anwenden

Diese Richtlinien sind zu beachten, wenn:

• Neue React-Komponenten oder Next.js-Seiten geschrieben werden
• Datenabruf (client- oder serverseitig) implementiert wird
• Code auf Leistungsprobleme überprüft wird
• Vorhandener React/Next.js-Code refaktorisiert wird
• Die Bundle-Größe oder Ladezeiten optimiert werden

Regelkategorien nach Priorität

Priorität	Kategorie	Auswirkung	Präfix
1	Wasserfälle eliminieren	KRITISCH	async-
2	Bundle-Größenoptimierung	KRITISCH	bundle-
3	Serverseitige Leistung	HOCH	server-
4	Clientseitiger Datenabruf	MITTEL-HOCH	client-
5	Re-Render-Optimierung	MITTEL	rerender-
6	Rendering-Leistung	MITTEL	rendering-
7	JavaScript-Leistung	NIEDRIG-MITTEL	js-
8	Fortgeschrittene Muster	NIEDRIG	advanced-

Kurzreferenz

1. Wasserfälle eliminieren (KRITISCH)

• async-cheap-condition-before-await – Günstige synchrone Bedingungen vor dem Awaiten von Flags oder entfernten Werten prüfen
• async-defer-await – await in die Zweige verschieben, in denen es tatsächlich verwendet wird
• async-parallel – Promise.all() für unabhängige Operationen verwenden
• async-dependencies – better-all für partielle Abhängigkeiten verwenden
• async-api-routes – Promises früh starten, spät in API-Routen awaten
• async-suspense-boundaries – Suspense zum Streamen von Inhalten verwenden

2. Bundle-Größenoptimierung (KRITISCH)

• bundle-barrel-imports – Direkt importieren, Barrel-Dateien vermeiden
• bundle-analyzable-paths – Statisch analysierbare Import- und Dateisystempfade bevorzugen, um breite Bundles und Traces zu vermeiden
• bundle-dynamic-imports – next/dynamic für schwere Komponenten verwenden
• bundle-defer-third-party – Analytics/Logging nach der Hydration laden
• bundle-conditional – Module nur laden, wenn die Funktion aktiviert ist
• bundle-preload – Bei Hover/Fokus vorladen für gefühlte Geschwindigkeit

3. Serverseitige Leistung (HOCH)

• server-auth-actions – Server-Aktionen wie API-Routen authentifizieren
• server-cache-react – React.cache() für pro-Request-Deduplizierung verwenden
• server-cache-lru – LRU-Cache für Cross-Request-Caching verwenden
• server-dedup-props – Doppelte Serialisierung in RSC-Props vermeiden
• server-hoist-static-io – Statische I/O (Schriftarten, Logos) auf Modulebene heben
• server-no-shared-module-state – Veränderlichen Module-Level-Request-Status in RSC/SSR vermeiden
• server-serialization – Daten minimieren, die an Client-Komponenten übergeben werden
• server-parallel-fetching – Komponenten umstrukturieren, um Abrufe zu parallelisieren
• server-parallel-nested-fetching – Verschachtelte Abrufe pro Element in Promise.all verketten
• server-after-nonblocking – after() für nicht blockierende Operationen verwenden

4. Clientseitiger Datenabruf (MITTEL-HOCH)

• client-swr-dedup – SWR zur automatischen Request-Deduplizierung verwenden
• client-event-listeners – Globale Event-Listener deduplizieren
• client-passive-event-listeners – Passive Listener für Scroll verwenden
• client-localstorage-schema – localStorage-Daten versionieren und minimieren

5. Re-Render-Optimierung (MITTEL)

• rerender-defer-reads – Keinen Status abonnieren, der nur in Callbacks verwendet wird
• rerender-memo – Teure Arbeit in memoized Komponenten auslagern
• rerender-memo-with-default-value – Standardmäßig nicht-primitive Props auf Modulebene heben
• rerender-dependencies – Primitive Abhängigkeiten in Effekten verwenden
• rerender-derived-state – Abgeleitete Booleans abonnieren, nicht Rohwerte
• rerender-derived-state-no-effect – Status während des Renderings ableiten, nicht in Effekten
• rerender-functional-setstate – Funktionellen setState für stabile Callbacks verwenden
• rerender-lazy-state-init – Funktion an useState für teure Werte übergeben
• rerender-simple-expression-in-memo – memo für einfache Primitive vermeiden
• rerender-split-combined-hooks – Hooks mit unabhängigen Abhängigkeiten aufteilen
• rerender-move-effect-to-event – Interaktionslogik in Event-Handler verschieben
• rerender-transitions – startTransition für nicht dringende Aktualisierungen verwenden
• rerender-use-deferred-value – Teures Rendern verzögern, um Eingaben reaktionsschnell zu halten
• rerender-use-ref-transient-values – Refs für transiente häufige Werte verwenden
• rerender-no-inline-components – Keine Komponenten innerhalb von Komponenten definieren

6. Rendering-Leistung (MITTEL)

• rendering-animate-svg-wrapper – Div-Wrapper animieren, nicht das SVG-Element
• rendering-content-visibility – content-visibility für lange Listen verwenden
• rendering-hoist-jsx – Statisches JSX außerhalb von Komponenten extrahieren
• rendering-svg-precision – SVG-Koordinatengenauigkeit reduzieren
• rendering-hydration-no-flicker – Inline-Script für clientseitige Daten verwenden
• rendering-hydration-suppress-warning – Erwartete Diskrepanzen unterdrücken
• rendering-activity – Activity-Komponente für ein-/ausblenden verwenden
• rendering-conditional-render – Ternären Operator verwenden, nicht && für Bedingungen
• rendering-usetransition-loading – useTransition für Ladezustand bevorzugen
• rendering-resource-hints – React DOM Resource Hints zum Vorladen verwenden
• rendering-script-defer-async – defer oder async auf Script-Tags verwenden

7. JavaScript-Leistung (NIEDRIG-MITTEL)

• js-batch-dom-css – CSS-Änderungen über Klassen oder cssText gruppieren
• js-index-maps – Map für wiederholte Lookups erstellen
• js-cache-property-access – Objekteigenschaften in Schleifen cachen
• js-cache-function-results – Funktionsergebnisse in modulebene Map cachen
• js-cache-storage – localStorage/sessionStorage-Lesezugriffe cachen
• js-combine-iterations – Mehrere filter/map in eine Schleife kombinieren
• js-length-check-first – Array-Länge vor teurem Vergleich prüfen
• js-early-exit – Frühzeitig aus Funktionen zurückkehren
• js-hoist-regexp – RegExp-Erstellung außerhalb von Schleifen heben
• js-min-max-loop – Schleife für Min/Max anstelle von sort verwenden
• js-set-map-lookups – Set/Map für O(1)-Lookups verwenden
• js-tosorted-immutable – toSorted() für Unveränderlichkeit verwenden
• js-flatmap-filter – flatMap zum Mappen und Filtern in einem Durchlauf verwenden
• js-request-idle-callback – Nicht kritische Arbeit in Browser-Leerlauf verschieben

8. Fortgeschrittene Muster (NIEDRIG)

• advanced-effect-event-deps – Ergebnisse von useEffectEvent nicht in Effekt-Abhängigkeiten aufnehmen
• advanced-event-handler-refs – Event-Handler in Refs speichern
• advanced-init-once – App einmal pro App-Lauf initialisieren
• advanced-use-latest – useLatest für stabile Callback-Refs

So verwenden Sie

Lesen Sie einzelne Regeldateien für detaillierte Erklärungen und Codebeispiele:

rules/async-parallel.md
rules/bundle-barrel-imports.md

Jede Regeldatei enthält:

• Kurze Erklärung, warum es wichtig ist
• Falsches Codebeispiel mit Erklärung
• Richtiges Codebeispiel mit Erklärung
• Zusätzlicher Kontext und Referenzen

Vollständiges kompiliertes Dokument

Für die vollständige Anleitung mit allen erweiterten Regeln: AGENTS.md