使用經過驗證的效能模式建立更快速的 React 和 Next.js 應用程式。此技能提供來自 Vercel 工程團隊的可行指南，用於消除瀑布流、減少套件大小和優化渲染。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「vercel-react-best-practices」。 具有依序 useEffect 擷取的元件
預期結果:
問題：三個 useEffect 鈎子依序擷取資料，導致渲染瀑布流。解決方案：將擷取合併為單一 useEffect 搭配 Promise.all()，或將父元件轉換為伺服器元件。
正在使用「vercel-react-best-practices」。 匯入陳述式引入整個 lodash 庫
預期結果:
問題：import _ from lodash 增加 72KB 到套件。解決方案：使用可 tree-shake 的匯入，如 import debounce from lodash/debounce，或切換到 lodash-es 以獲得更好的打包器優化。
正在使用「vercel-react-best-practices」。 元件在每次渲染時重新計算昂貴的值
預期結果:
問題：昂貴的計算在每次渲染時執行。解決方案：用正確的依賴包裝在 useMemo 中，或提取到獨立的 memoized 元件，該元件僅在輸入變更時重新渲染。
安全審計
安全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.
品質評分
你能建構什麼
建立新 React 功能
開發新功能的 React 開發人員從一開始就以最佳效能撰寫元件，遵循 Vercel 核准的資料擷取、渲染和套件優化模式
審查 pull request
審查 pull request 的團隊在合併前檢查程式碼是否存在效能反模式，在開發早期發現瀑布流、不必要的重新渲染和套件膨脹問題
遷移至 Next.js App Router
遷移至 Next.js App Router 的工程師將用戶端模式轉換為伺服器元件架構，學習正確使用伺服器快取、序列化邊界和平行資料擷取
試試這些提示
審查此 React 元件的效能問題。識別任何渲染瀑布流、不必要的重新渲染或套件優化機會。根據 Vercel 最佳實踐建議具體改進措施。
此元件依序擷取資料。使用 Promise.all() 重構為平行擷取，或重構為伺服器元件。解釋哪種方法更適合此用例。
分析此伺服器元件的資料擷取。建議使用 React.cache() 進行每個請求的去重複，或使用 LRU 快取進行跨請求優化的快取策略。包含快取失效考量。
設計一個包含 10 個小工具的儀表板，顯示即時和歷史資料。請指定：1) 伺服器與用戶端元件邊界，2) 資料擷取和快取策略，3) 使用 Suspense 的載入狀態，4) 第三方圖表庫的套件優化。
最佳實務
- 盡早啟動 Promise，延後 await - 在需要之前就開始資料擷取，延後 await 直到需要值時
- 預設使用伺服器元件 - 只有在需要瀏覽器 API 或互動功能時才添加 'use client'
- 優先使用 SWR 或 React Query 進行用戶端資料擷取 - 內建快取、去重複和重新驗證功能
避免
- 在不同的 useEffect 鈎子中依序擷取資料 - 導致渲染瀑布流
- 匯入整個工具函式庫 - 套件膨脹，改用特定匯入
- 使用 && 條件渲染會渲染 '0' 的元件 - 改用三元運算子