React サーバー機能のチートシート

React Server 機能の基本

• サーバーコンポーネント (React Server Component、RSC): サーバー上で実行され、SSR と同様にクライアントにレンダリングされるコンポーネント。
• サーバー機能 (別名サーバー アクション): サーバー上でのみ実行され、情報をクライアントに送信する機能。

指令

• 'use client': 「サーバー コンポーネント」が有効な環境を使用している場合は、ファイルの先頭で use client をマークして、クライアント コンポーネントとしてマークする必要があります。
• 'use server': サーバー上の情報を変更することを考慮している場合は、サーバーコンポーネントまたはファイルの関数本体の先頭に use server ディレクティブをマークして、サーバー上でのみ動作するようにする必要があります。

サーバーコンポーネント

• RSC はステートフルでもライフサイクルでもありません。サーバーコンポーネントではフック関数 (useState、useEffect など) を使用できません。
• RSC は非同期機能を持つことができます。
• RSC はサーバー機能を持つことができます。ただし、関数本体の先頭で「サーバーを使用」とマークする必要があります。
• RSC はサーバー コンポーネントとクライアント コンポーネントの両方に子を持つことができます。
• RSC はブラウザ API を実行できません。
• RSC は、あらゆるタイプのプロパティを RSC に渡すことができます。制限付きで props タイプをクライアント コンポーネントに渡すこともできます。以下のディレクティブの種類の表を確認してください。

サーバー機能

• 定義時に、関数本体またはファイルに「use server」ディレクティブが必要です。
• 関数本体で任意のサーバー機能を実行できます。
• 関数本体でブラウザ API を実行することはできません。
• サーバーとクライアントの両方でサーバー関数を呼び出すことができます。
• 制限付きで値を返すことができます。以下のディレクティブの種類の表を確認してください。

サーバーコンポーネントでのサーバー関数の宣言

別ファイルでサーバー関数を宣言

クライアントコンポーネントでのサーバー関数の使用

ディレクティブ内のハンドル値の型の比較

• クライアントを使用: プロパティ タイプをサーバー コンポーネントからクライアント コンポーネントに渡します。
• use 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 中国語 Web サイトの他の関連記事を参照してください。