RSC (React Server Components)
名詞 · React
React 的新範式,某些組件專門在伺服器上執行,直接存取資料庫和 API 而不將其 JavaScript 程式碼發送到瀏覽器——大幅縮減客戶端 bundle 的大小。
原生整合於 Next.js 的革命性架構,將組件分為兩類:用於靜態渲染和資料存取的 Server Components,以及用於互動性的 Client Components——自動優化發送到瀏覽器的內容。
React 生態系統的重大演進,消除了效能與功能之間的歷史權衡,讓伺服器組件能預先解析資料,然後僅將產生的 HTML 傳送到客戶端。
React Server Components(RSC)是一種新型的 React 組件,專門在伺服器上執行。它們可以直接存取資料庫、檔案系統和 API,而不將其 JavaScript 程式碼發送到使用者的瀏覽器。渲染結果以 HTML 和序列化 payload 的形式傳輸到客戶端。我們的團隊透過 Next.js 原生使用 RSC,建構只將互動所需的 JavaScript 發送到瀏覽器的應用程式。
傳統 React 組件(Client Components)在瀏覽器中下載、解析和執行,包含其所有程式碼、依賴項和邏輯在 JavaScript bundle 中。RSC 則只在伺服器上執行:其依賴項(解析函式庫、資料庫存取、格式化函式庫)永遠不會發送到客戶端。我們的團隊利用這種區別將 JavaScript bundle 大小縮減高達 70%,大幅加速頁面載入。
RSC 透過消除瀏覽器中多餘的 JavaScript 來革新網頁效能。傳統上,即使是顯示靜態文字的組件也會將其 JavaScript 程式碼發送到客戶端。使用 RSC 後,只傳輸產生的 HTML,伺服器端依賴項(如 markdown 函式庫或 ORM)永遠不會加重客戶端 bundle。我們的團隊在遷移到 RSC 架構的專案上觀察到 Time to Interactive 和 Largest Contentful Paint 的顯著改善。
RSC 透過自動將所有伺服器組件的程式碼及其依賴項從客戶端 JavaScript 中排除來縮減 bundle 大小。在 RSC 中使用的日期格式化函式庫、Markdown 解析器或資料庫客戶端永遠不會出現在瀏覽器下載的 bundle 中。我們的團隊架構專案以最大化 Server Components 的比例,僅在嚴格必要的使用者互動時才切換為 Client Components。
RSC 對 SEO 有非常正面的影響,因為內容直接在伺服器上渲染為 HTML,索引機器人無需執行 JavaScript 即可立即讀取。此外,頁面更輕量、載入更快,改善了作為 Google 排名因素的 Core Web Vitals。我們的團隊利用 RSC 讓您的內容頁面達到接近 100 的 Lighthouse 分數,最大化您的自然搜尋能見度。
是的,這正是 React 和 Next.js 推薦的模型。Server Components 處理靜態渲染、資料存取和版面配置,而 Client Components 負責互動性——表單、動畫、狀態管理。Server Component 可以匯入和渲染 Client Component,建立最佳的分層架構。我們的團隊設計組件樹,讓每一層都使用對其職責最高效的類型。
RSC 允許直接從組件程式碼查詢資料庫和 API,無需建立中間的 API route 或客戶端資料獲取層。伺服器組件以非同步方式解析資料,然後將渲染結果以 HTML 傳輸到瀏覽器。我們的團隊利用這種簡潔性來降低專案的架構複雜度,消除多層樣板程式碼,同時維持清晰的職責分離。
RSC 大幅增強安全性,因為 API 金鑰、資料庫存取令牌和敏感商業邏輯完全保留在伺服器上,永遠不會暴露在客戶端 JavaScript 中。惡意使用者無法檢查 bundle 來發現私有端點或機密。我們的團隊將 RSC 視為重要的安全槓桿,能在組件中操作敏感資料而無客戶端洩漏風險。
採用 Next.js RSC 架構,是對專案效能、安全性和長期可維護性的投資。您的頁面載入更快、bundle 更輕量、資料保護更好且程式碼更易維護。我們的團隊協助企業完成這一策略性轉型,設計客製的 RSC 架構,將您的網頁應用程式轉化為市場上持久的競爭優勢。