vercel-react-best-practices
Optimiere React und Next.js Performance
也可从以下获取: vercel-labs,ZhanlinCui,am-will
Entwickle schnellere React und Next.js Anwendungen mit bewährten Performance-Mustern. Diese Skill bietet umsetzbare Richtlinien von Vercel Engineering, um Waterfalls zu eliminieren, Bundle-Größe zu reduzieren und Rendering zu optimieren.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“vercel-react-best-practices”。 Komponente mit sequenziellen useEffect-Fetches
预期结果:
Problem: Drei useEffect-Hooks fetchen Daten sequenziell und verursachen einen Render-Waterfall. Lösung: Kombiniere Fetches in einen einzelnen useEffect mit Promise.all() oder konvertiere die Parent-Komponente zu Server Components.
正在使用“vercel-react-best-practices”。 Import-Statement, das die gesamte Lodash-Bibliothek lädt
预期结果:
Problem: import _ from 'lodash' fügt 72KB zum Bundle hinzu. Lösung: Verwende tree-shakeable Imports wie import debounce from 'lodash/debounce' oder wechsle zu lodash-es für bessere Bundler-Optimierung.
正在使用“vercel-react-best-practices”。 Komponente berechnet teuren Wert bei jedem Rendering neu
预期结果:
Problem: Teure Berechnung läuft bei jedem Rendering. Lösung: Wrapp in useMemo mit korrekten Dependencies oder extrahiere in eine separate memoized-Komponente, die nur neu rendert, wenn sich Inputs ändern.
安全审计
安全Static analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.
质量评分
你能构建什么
Neue React-Features entwickeln
React-Entwickler, die neue Features bauen, schreiben Komponenten mit optimaler Performance von Anfang an und folgen dabei Vercel-geprüften Mustern für Data Fetching, Rendering und Bundle-Optimierung
Pull Requests reviewen
Teams, die Pull Requests reviewen, prüfen Code vor dem Mergen auf Performance-Anti-Patterns und fangen Waterfalls, unnötige Re-Renderings und Bundle-Blähung früh in der Entwicklung ab
Migration zu Next.js App Router
Ingenieure, die zu Next.js App Router migrieren, konvertieren Client-seitige Patterns zu Server Component-Architektur und lernen die korrekte Verwendung von Server-Caching, Serialisierungs-Grenzen und parallelem Data Fetching
试试这些提示
Prüfe diese React-Komponente auf Performance-Probleme. Identifiziere Render-Waterfalls, unnötige Re-Renderings oder Bundle-Optimierungsmöglichkeiten. Schlage konkrete Verbesserungen basierend auf Vercel Best Practices vor.
Diese Komponente fetcht Daten sequenziell. Refaktoriere sie für paralleles Fetching mit Promise.all() oder strukturiere sie als Server Components um. Erkläre, welcher Ansatz für diesen Use Case besser ist.
Analysiere das Data Fetching dieser Server Component. Empfiehl eine Caching-Strategie mit React.cache() für Per-Request-Deduplizierung oder LRU-Caching für Cross-Request-Optimierung. Füge Überlegungen zur Cache-Invalidation hinzu.
Designe ein Dashboard mit 10+ Widgets, die Echtzeit- und historische Daten anzeigen. Spezifiziere: 1) Server vs. Client Component Boundaries, 2) Data Fetching und Caching-Strategie, 3) Loading States mit Suspense, 4) Bundle-Optimierung für Drittanbieter-Charting-Bibliotheken.
最佳实践
- Starte Promises früh und await spät - initiiere Data Fetching bevor es benötigt wird, verschiebe await bis der Wert benötigt wird
- Verwende Server Components als Standard - füge nur 'use client' hinzu, wenn Browser-APIs oder Interaktivität erforderlich sind
- Bevorzuge SWR oder React Query für Client-Data-Fetching - eingebautes Caching, Deduplizierung und Revalidation
避免
- Sequenzielles Data Fetching in separaten useEffect-Hooks - verursacht Render-Waterfalls
- Importieren gesamter Utility-Bibliotheken - aufgeblähte Bundles, verwende stattdessen spezifische Imports
- Verwendung von && für bedingtes Rendering von Komponenten, die '0' rendern - verwende Ternary-Operator