server-components

server-components 技能為使用 Next.js App Router 的開發人員提供專家級架構指導。它旨在幫助用戶導航 React Server Components (RSC) 與客戶端組件之間的細微差別。透過理解由 'use client' 指令所強制執行的「客戶端邊界」，開發人員可以優化應用程式的性能、安全性和 bundle 大小。此技能協助確定組件的正確位置、管理異步數據獲取，並實施高級組合模式，例如將伺服器渲染的子組件封裝在交互式客戶端包裝器內。用戶將獲得關於何時優先考慮伺服器端執行（用於資料庫訪問和密鑰管理）與客戶端執行（用於狀態交互、瀏覽器 API 和事件處理）的明確規則。核心功能包括 RSC 的架構審查、識別常見錯誤（如將伺服器邏輯匯入客戶端 bundle），以及使用 Suspense 和平行數據獲取的最佳實踐。典型用例包括將舊模式遷移至 App Router、調試水合或邊界問題，以及設計最小化客戶端 JavaScript 的高效組件層次結構。實際輸入包括組件檔案路徑或代碼片段，輸出則提供重構後的代碼模式、結構圖以及渲染行為說明。限制條件包括遵循 Next.js 序列化規則，避免不必要的 'use client' 使用，並確保數據在伺服器與客戶端之間正確流動。

• 提供關於 React Server Components 心智模型與客戶端邊界管理的專家指導。

• 識別 'use client' 與默認伺服器組件的適用場景。

• 進階組合策略，包括將子組件作為伺服器組件傳遞以及基於插槽的佈局。

• 數據獲取優化技術，包括異步伺服器函數、平行獲取及 Suspense 串流。

• Next.js App Router 應用的架構故障排除，以減少 bundle 大小並提升性能。

• 保留敏感數據（API 密鑰、資料庫邏輯）僅在伺服器端的最佳實踐。

• 在 Next.js 中開始新頁面或佈局設計時使用此技能。

• 若遇到水合錯誤或指令使用不當時請諮詢此技能。

• 在透過將繁重邏輯卸載至伺服器來優化 Web Vitals 時應用這些模式。

• 利用提供的組合模式構建靈活、互動式的介面，且不犧牲性能。