React 伺服器功能備忘單

React 伺服器功能基礎知識

• 伺服器元件（React Server Component，RSC）：運行在伺服器上並像SSR一樣渲染到客戶端的元件。
• 伺服器功能（又稱伺服器操作）：僅在伺服器上執行並將資訊傳送到客戶端的功能。

指令

• 'use client'：如果您使用的是啟用「伺服器元件」的環境，則應在檔案頂部標記 use client 以將其標記為用戶端元件。
• ‘use server’：如果你考慮改變伺服器上的信息，你應該在伺服器元件或檔案的函數體頂部標記 use server 指令，以僅在伺服器上操作。

伺服器元件

• RSC 沒有狀態，也沒有生命週期。您不能在伺服器元件上使用任何鉤子函數（useState、useEffect 等）。
• RSC 可以有非同步函數。
• RSC可以具有伺服器功能。但您必須在函數體頂部標記“使用伺服器”。
• RSC 可以在伺服器元件和客戶端元件中擁有子元件。
• RSC 無法執行任何瀏覽器 API。
• 您的 RSC 可以將任何類型的 props 傳遞給 RSC。也可以將 props 類型傳遞給客戶端元件。檢查下面的指令類型表。

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

伺服器功能

• 定義時，函式體或檔案中必須有「use server」指令。
• 您可以在函數體上運行任何伺服器功能。
• 您無法在函數體上執行瀏覽器API。
• 您可以在伺服器和客戶端上呼叫伺服器函數。
• 您可以傳回有限制的值。檢查下面的指令類型表。

在伺服器元件中宣告伺服器函數

import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';

    await db.notes.create();
  }

  return <button onclick="{createNoteAction}/">;
}
</button>

在單獨的檔案中聲明伺服器功能

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

在客戶端元件中使用伺服器功能

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

指令中句柄值類型的比較

• 使用客戶端：將 prop 類型從伺服器元件傳遞到客戶端元件。
• use server: Server函數的回傳類型

Type	use client	use server	Notes
string	✅	✅	both string value and iterables are supported.
number	✅	✅
bigint	✅	✅
boolean	✅	✅
undefined	✅	✅
null	✅	✅
Array	✅	✅	Only available in the item of serializable list.
Map	✅	✅	Only available in the item of serializable list.
Set	✅	✅	Only available in the item of serializable list.
TypedArray	✅	✅
ArrayBuffer	✅	✅
Date	✅	✅
object	✅	✅	Support only plain object(object initializers or JSON), null prototype not supported.
Promises	✅	✅	Only available in the serializable list.
ReactNode	✅	❌	Only Server Component can send it to Client Component via props.
FormData	❌	✅	Only server functions can return FormData instance.
symbol	⚠️	⚠️	Only symbols registered in the global Symbol registry via Symbol.for
function	⚠️	⚠️	Only server functions allowed.
class	❌	❌	Any instance objects are not serializable.

• 其他型別和實例不可用。

快樂反應！

以上是React 伺服器功能備忘單的詳細內容。更多資訊請關注PHP中文網其他相關文章！