釋放 React 伺服器元件的力量 |第 1 部分

？大家好！
React.js 是用於建立使用者介面的最受歡迎的 JavaScript 程式庫之一。雖然 React 社群有詳細記錄，但仍有一些鮮為人知的主題和概念。
我們泡茶或咖啡吧，出發吧！
React Server Components (RSC) 是 React 團隊推出的一項新的實驗性功能，用於優化渲染效能。它們允許開發人員建立在伺服器上呈現的應用程式的一部分，同時仍維護 React 元件模型。
它在與客戶端或 SSR 伺服器不同的環境中運行，並且可以在 CI 伺服器上建置時調用一次，或者可以使用 Web 伺服器針對每個請求運行它們。
透過 React Server 元件的強大功能，我們可以直接在 React 元件中讀取檔案內容。
下面，有一個簡單的例子，我們該怎麼做。

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

客戶端只會看到檔案的渲染輸出。這意味著內容在第一頁載入期間是可見的，並且捆綁包不包含渲染靜態內容所需的昂貴的庫（標記為 sanitize-html）。

帶有伺服器的伺服器元件

使用伺服器元件，我們可以與資料庫通信，取得任何資料並在客戶端中使用。我們也可以在 Next.js 應用程式中做到這一點，整合任何 ORM。
下面是一個使用伺服器元件從資料庫取得資料的簡單範例。

import db from './database';

async function Note({id}) {
  // NOTE: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <author>



<p>In database file there can be implementation of data query from database.<br>
For example:<br>
</p>

<pre class="brush:php;toolbar:false">const db = {
  notes: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM notes WHERE id = ?', [id]);
    }
  },
  authors: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM authors WHERE id = ?', [id]);
    }
  }
};

然後，捆綁器將資料、渲染的伺服器元件和動態用戶端元件組合成一個捆綁包。當頁面載入時，瀏覽器看不到原始的Note和Author元件；僅渲染的輸出傳送到客戶端。 伺服器元件可以透過從伺服器重新取得它們來動態化，它們可以存取資料並再次渲染。

非同步組件與伺服器組件的強大功能

伺服器元件引進了一種使用 async/await 編寫元件的新方法。當您在非同步元件中等待時，React 將暫停並等待承諾解決，然後再恢復渲染。這可以跨伺服器/客戶端邊界工作，並支援 Suspense 的串流。
伺服器元件範例：

// Server Component
import db from './database';

async function Page({id}) {
  // Will suspend the Server Component.
  const note = await db.notes.get(id);

  // NOTE: not awaited, will start here and await on the client. 
  const commentsPromise = db.comments.get(note.id);
  return (
    <div>
      {note}
      <suspense fallback="{<p">Loading Comments...}>
        <comments commentspromise="{commentsPromise}"></comments>
      </suspense>
    </div>
  );
}

// Client Component
"use client";
import {use} from 'react';

function Comments({commentsPromise}) {
  // NOTE: this will resume the promise from the server.
  // It will suspend until the data is available.
  const comments = use(commentsPromise);
  return comments.map(commment => <p>{comment}</p>);
}

評論的優先順序較低，因此我們在伺服器上啟動 Promise，並使用 *use * API 在客戶端等待它。這將在客戶端掛起，而不會阻止筆記內容的渲染。

在接下來的部分中，我們將討論伺服器操作和指令（「使用客戶端」、「使用伺服器」）的功能，以及為什麼「使用伺服器」與「使用客戶端」沒有相同的角色？

再見！

雖然伺服器元件仍處於實驗階段，但它們因其改進大規模應用程式的潛力而逐漸受到關注。它們消除了將不必要的 JavaScript 傳送到客戶端的需要，從而實現更快的載入時間和更流暢的使用者體驗。