# Server Actions の戻り値には JSX を使える
Server Actions の戻り値には、サーバーからクライアントにデータを渡せるように、シリアライズ可能な形式である必要があります。具体的には、以下の型をサポートしています。
- Primitives
- string
- number
- bigint
- boolean
- undefined
- null
- symbol, only symbols registered in the global Symbol registry via Symbol.for
- Iterables containing serializable values
- String
- Array
- Map
- Set
- TypedArray and ArrayBuffer
- Date
- FormData instances
- Plain objects: those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
- Functions that are server actions
- Promises
[Serializable arguments and return values](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values)
上記にないデータ型、例えば Class は、シリアライズできないので、Server Actions 戻り値に使うことができないというわけですね。
```ts
"user strict";
class User {
name: string;
amount: number;
constructor(name: string, amount: number) {
this.name = name;
this.amount = amount;
}
}
export const action = (formData: FormData) => {
const name = formData.get("name") as string;
const amount = Number(formData.get("amount")) as number;
const user = new User(name, amount);
// 実行時エラーになる
// Uncaught (in promise) Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
return {
user,
};
};
```
ただし面白いことに、ドキュメントでは React Elements または JSX はサポートされていないと記述されているものの、実際には Server Actions の戻り値に JSX を使うことができます。
```tsx:app/lib/actions.tsx
"use server";
export const action = async (
formData: FormData
): Promise<{ message: ReactElement }> => {
const name = formData.get("name") as string;
// create user...
return {
message:
user created. name: {name}
,
};
};
```
コンポーネント側では、以下のように Server Actions の戻り値を受け取って JSX をレンダリングできます。
```tsx:app/Form.tsx
"use client";
import { ReactElement, useState } from "react";
import { action } from "@/app/lib/actions";
export default function Form() {
const [message, setMessage] = useState(null);
return (
);
}
```
## 使い所
Server Actions で JSX を返すことができるのであれば、どのような場面で使えるのでしょうか？例として、ページネーション付きの投稿一覧を表示するページを考えてみましょう。
Server Actions では API から得られたデータを単に返すだけでなく、次のデータが存在するかどうかでボタンを返すかどうか決めたり、ボタンをクリックしたときの次のページ番号を予め設定しておいたりできます。
Server Actions 関数を見てみましょう。次のページまたは前のページが存在するかどうかで、`pagination` をどのように返すのか決めています。また、`