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

什麼是 React 伺服器元件？

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

RSC 的主要特點(diǎn)：

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

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

1. 性能提升

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

2. 簡化資料取得

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

3. SEO 友善的應(yīng)用程式

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

4. 減少捆綁包大小

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

React 伺服器元件如何運(yùn)作？

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

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

真實(shí)範(fàn)例：使用 React 伺服器元件進(jìn)行構(gòu)建

讓我們來看看 React Server 元件的簡單實(shí)作。

設(shè)定您的項目

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

範(fàn)例程式碼

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>
  );
}