隨著 Web 開發(fā)環(huán)境的發(fā)展，對更快、更有效率和可擴展的解決方案的需求不斷增長。 React Server Components (RSC) 已成為一項改變遊戲規(guī)則的功能，旨在透過優(yōu)化我們建構和交付現(xiàn)代 Web 應用程式的方式來滿足這些需求。讓我們探討一下 React Server 元件是什麼、它們?yōu)楹沃匾约叭绾伍_始使用它們。

什麼是 React 伺服器元件？

React 伺服器元件（RSC）是一種新型的 React 元件，它運行在伺服器而不是客戶端。與依賴客戶端渲染的傳統(tǒng) React 元件不同，RSC 允許開發(fā)人員將邏輯和渲染卸載到伺服器，從而減少發(fā)送到瀏覽器的 JavaScript 量。這種方法提高了效能和使用者體驗。

RSC 的主要特點：

• 伺服器優(yōu)先渲染：元件在伺服器上渲染，減少了對水化的需求。
• 高效率資料取得：直接在伺服器上取得數(shù)據(jù)，無需額外的客戶端API呼叫。
• 減少客戶端 JavaScript：最小化 JavaScript 有效負載，進而加快頁面載入速度。
• 無縫整合：與傳統(tǒng)客戶端元件一起工作，實現(xiàn)混合渲染。

React 伺服器元件的優(yōu)點

1. 性能提升

透過將渲染轉移到伺服器，RSC 減少了需要在瀏覽器中下載和執(zhí)行的 JavaScript 數(shù)量。這會縮短載入時間並提高效能，尤其是在低功耗設備上。

2. 簡化資料取得

使用 RSC，您可以在元件渲染過程中直接在伺服器上取得資料。這消除了複雜的客戶端狀態(tài)管理或額外的 API 呼叫的需要。

3. SEO 友善的應用程式

伺服器渲染元件確保搜尋引擎可以輕鬆索引您的內容，從而增強 Web 應用程式的可發(fā)現(xiàn)性。

4. 減少捆綁包大小

由於 RSC 某些元件不需要客戶端 JavaScript，因此它顯著減小了整體套件大小，從而加快了頁面載入速度。

React 伺服器元件如何運作？

RSC 利用伺服器的處理能力來處理渲染，從而實現(xiàn)更有效率的工作流程。這是一個簡化的概述：

1. 元件渲染：伺服器渲染React元件並將結果作為序列化的HTML和JSON傳送到客戶端。
2. 混合元件：您可以在相同應用程式中使用伺服器和用戶端元件。例如，將 RSC 用於靜態(tài)內容，將客戶端元件用於互動式元素。
3. 串流：React 支援串流回應，允許內容在瀏覽器中逐步加載，同時在伺服器上繼續(xù)渲染。

真實範例：使用 React 伺服器元件進行構建

讓我們來看看 React Server 元件的簡單實作。

設定您的項目

要開始使用 RSC，您需要一個支援伺服器渲染的 React 設定。像 Next.js 這樣的工具或整合 React 18 的框架是理想的選擇。

範例程式碼

1。伺服器組件：

// components/ProductList.server.js
import fetch from 'node-fetch';

export default async function ProductList() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name} - ${product.price}</li>
      ))}
    </ul>
  );
}

2?？蛻舳嗽?/strong>

// components/ProductDetail.client.js
import { useState } from 'react';

export default function ProductDetail({ product }) {
  const [details, setDetails] = useState(null);

  async function fetchDetails() {
    const res = await fetch(`/api/product/${product.id}`);
    const data = await res.json();
    setDetails(data);
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <button onClick={fetchDetails}>View Details</button>
      {details && <p>{details.description}</p>}
    </div>
  );
}

// pages/index.js
import ProductList from '../components/ProductList.server';
import ProductDetail from '../components/ProductDetail.client';

export default function Home() {
  return (
    <div>
      <h1>Product Store</h1>
      <ProductList />
    </div>
  );
}