React Server Actions: サーバー側のフォーム処理の簡素化

React 18で導入され、Next.jsで大幅に強化されたReact Server Actionsは、フォーム送信とデータ変更をサーバー上で直接処理するための革新的なアプローチを提供します。この強力な機能は、開発プロセスを簡素化し、セキュリティを強化し、従来のクライアントサイドでのデータ取得と操作と比較してパフォーマンスを向上させます。

React Server Actionsとは？

Server Actionsは、サーバー上で実行され、Reactコンポーネントから直接呼び出すことができる非同期関数です。これらを使用すると、次のようなサーバー側のタスクを実行できます。

• フォーム送信：サーバー上でフォームデータを安全に処理します。
• データ変更：データベースまたは外部APIを更新します。
• 認証：ユーザーのログインと登録を処理します。
• サーバーサイドロジック：クライアントに公開せずに、複雑なビジネスロジックを実行します。

Server Actionsの主な利点は、Reactコンポーネント内でサーバーサイドコードを記述できることであり、個別のAPIルートや複雑なクライアントサイドのデータ取得ロジックが不要になります。このUIとサーバーサイドロジックの共存により、より保守的で効率的なコードベースが実現します。

React Server Actionsを使用する利点

React Server Actionsを使用すると、いくつかの重要な利点が得られます。

開発の簡素化

Server Actionsは、Reactコンポーネント内でフォーム送信とデータ変更を直接処理できるようにすることで、ボイラープレートコードを削減します。これにより、個別のAPIエンドポイントと複雑なクライアントサイドのデータ取得ロジックが不要になり、開発プロセスが合理化され、コードの理解と保守が容易になります。簡単な連絡先フォームを考えてみましょう。Server Actionsを使用しない場合、フォーム送信を処理するための個別のAPIルート、データを送信するためのクライアントサイドのJavaScript、およびクライアントとサーバーの両方でのエラー処理ロジックが必要になります。Server Actionsを使用すると、これらすべてをコンポーネント内で処理できます。

セキュリティの強化

サーバー上でコードを実行することにより、Server Actionsはアプリケーションの攻撃対象領域を削減します。機密データとビジネスロジックはクライアントから隔離され、悪意のあるユーザーによる改ざんを防ぎます。たとえば、データベースの資格情報やAPIキーはクライアントサイドコードに公開されることはありません。すべてのデータベース操作はサーバー上で実行され、SQLインジェクションや不正なデータアクセスのリスクが軽減されます。

パフォーマンスの向上

Server Actionsは、クライアントでダウンロードして実行する必要のあるJavaScriptの量を減らすことで、パフォーマンスを向上させることができます。これは、低電力デバイスやインターネット接続が遅いユーザーにとって特に有益です。データ処理はサーバー上で実行され、必要なUI更新のみがクライアントに送信されるため、ページの読み込みが速くなり、ユーザーエクスペリエンスが向上します。

楽観的更新

Server Actionsは、ReactのSuspenseとTransitionsとシームレスに統合し、楽観的更新を可能にします。楽観的更新を使用すると、サーバーがアクションを確認する前であっても、UIをすぐに更新できます。これにより、ユーザーはアクションの結果が表示されるのを待つ必要がなくなり、より応答性が高く、魅力的なユーザーエクスペリエンスが提供されます。eコマースでは、ショッピングカートに商品を追加すると、サーバーがバックグラウンドで追加を確認している間、すぐに表示できます。

プログレッシブエンハンスメント

Server Actionsはプログレッシブエンハンスメントをサポートしており、JavaScriptが無効になっているか、読み込みに失敗した場合でも、アプリケーションは引き続き機能します。JavaScriptが無効になっている場合、フォームは従来のHTMLフォームとして送信され、サーバーは送信を処理し、ユーザーを新しいページにリダイレクトします。これにより、ブラウザの設定やネットワークの状態に関係なく、すべてのユーザーがアプリケーションにアクセスできるようになります。これは、アクセシビリティとSEOにとって特に重要です。

React Server Actionsの使用方法

React Server Actionsを使用するには、Next.jsなどのそれらをサポートするフレームワークを使用する必要があります。ステップバイステップガイドは次のとおりです。

1. Server Actionの定義

サーバー上で実行される非同期関数を作成します。この関数は、データベースの更新やAPIの呼び出しなど、サーバー上で実行するロジックを処理する必要があります。Server Actionであることを示すために、関数を先頭に`"use server"`ディレクティブでマークします。このディレクティブは、Reactコンパイラに、関数をサーバーサイド関数として扱い、クライアントとサーバー間のデータのシリアル化とデシリアル化を自動的に処理するように指示します。

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

説明：

• `'use server'`ディレクティブは、この関数をServer Actionとしてマークします。
• `revalidatePath('/')`はルートキャッシュをクリアし、次のリクエストで更新されたデータが確実にフェッチされるようにします。これは、データの整合性を維持するために不可欠です。
• `saveMessage(message)`は、実際にデータベース操作ロジックを処理するためのプレースホルダーです。メッセージをデータベースに保存するために、どこかで`saveMessage`関数が定義されていることを前提としています。
• この関数は、ユーザーにフィードバックを表示するために使用できる状態オブジェクトを返します。

2. コンポーネントでのServer Actionのインポートと使用

ReactコンポーネントにServer Actionをインポートし、フォーム要素の`action`プロパティとして使用します。`useFormState`フックを使用して、フォームの状態を管理し、ユーザーにフィードバックを表示できます。

// app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}

説明：

• `'use client'`ディレクティブは、これがクライアントコンポーネントであることを指定します（`useFormState`を使用しているため）。
• `useFormState(createMessage, {message: ''})`は、`createMessage`Server Actionでフォームの状態を初期化します。2番目の引数は初期状態です。
• `form`要素の`action`プロパティは、`useFormState`によって返される`formAction`に設定されます。
• `state`変数には、Server Actionからの戻り値が含まれており、これを使用してユーザーにフィードバックを表示できます。

3. フォームデータの処理

Server Action内で、`FormData`APIを使用してフォームデータにアクセスできます。このAPIは、フォームフィールドの値にアクセスするための便利な方法を提供します。

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. エラーの処理

`try...catch`ブロックを使用して、Server Actionの実行中に発生する可能性のあるエラーを処理します。状態オブジェクトにエラーメッセージを返して、ユーザーに表示します。

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

5. データの再検証

Server Actionが正常にデータを変更した後、UIが最新の変更を反映するように、データキャッシュを再検証する必要がある場合があります。`next/cache`から`revalidatePath`または`revalidateTag`関数を使用して、特定のパスまたはタグを再検証します。

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}

高度な使用法

データの変更

Server Actionsは、データベースの更新や外部APIの更新など、データの変更に特に適しています。Server Actionsを使用して、データの検証、計算の実行、複数のデータソースとの対話など、サーバーサイドロジックを必要とする複雑なデータ変更を処理できます。ユーザーのプロファイルを更新し、確認メールを送信する必要があるシナリオを考えてみましょう。Server Actionは、データベースの更新とメール送信プロセスを1つのアトミック操作で処理できます。

認証と承認

Server Actionsを使用して、認証と承認を処理できます。サーバーで認証と承認のチェックを実行することにより、承認されたユーザーのみが機密データと機能にアクセスできるようにすることができます。Server Actionsを使用して、ユーザーのログイン、登録、およびパスワードのリセットを処理できます。たとえば、Server Actionは、データベースに対してユーザーの資格情報を検証し、後続のリクエストを認証するために使用できるトークンを返すことができます。

エッジファンクション

Server Actionsは、ユーザーに近いグローバルネットワークのサーバー上で実行されるエッジファンクションとしてデプロイできます。これにより、特に地理的に分散した場所にいるユーザーの場合、待ち時間を大幅に削減し、パフォーマンスを向上させることができます。エッジファンクションは、リアルタイムのデータ更新やパーソナライズされたコンテンツ配信など、低レイテンシを必要とするServer Actionsの処理に最適です。Next.jsは、Server Actionsをエッジファンクションとしてデプロイするための組み込みサポートを提供しています。

ストリーミング

Server Actionsはストリーミングをサポートしており、データが利用可能になるにつれて、チャンク単位でクライアントにデータを送信できます。これにより、アプリケーションの認識されるパフォーマンスが向上し、特に実行に時間がかかるServer Actionsの場合に効果的です。ストリーミングは、大きなデータセットや複雑な計算を処理する場合に特に役立ちます。たとえば、データベースから検索結果を取得しながらクライアントにストリーミングできるため、より応答性の高いユーザーエクスペリエンスを提供できます。

ベストプラクティス

React Server Actionsを使用する際に従うべきいくつかのベストプラクティスを次に示します。

• Server Actionsを小さく、焦点を絞ったものに保つ：各Server Actionは、単一の明確に定義されたタスクを実行する必要があります。これにより、コードの理解、テスト、および保守が容易になります。
• 説明的な名前を使用する：Server Actionの目的を明確に示す名前を選択します。たとえば、`createComment`や`updateUserProfile`は、`processData`のような一般的な名前よりも優れています。
• サーバーでデータを検証する：悪意のあるユーザーがアプリケーションに無効なデータを注入するのを防ぐために、常にサーバーでデータを検証します。これには、データ型、形式、および範囲の検証が含まれます。
• エラーを適切に処理する：`try...catch`ブロックを使用してエラーを処理し、ユーザーに有益なエラーメッセージを提供します。機密性の高いエラー情報をクライアントに公開することは避けてください。
• 楽観的更新を使用する：サーバーがアクションを確認する前であっても、UIをすぐに更新することにより、より応答性の高いユーザーエクスペリエンスを提供します。
• 必要に応じてデータを再検証する：Server Actionがデータを変更した後、UIが最新の変更を反映するように、データキャッシュを再検証します。

実際の例

React Server Actionsをさまざまなタイプのアプリケーションでどのように使用できるかの実際の例をいくつか見てみましょう。

Eコマースアプリケーション

• ショッピングカートに商品を追加する：Server Actionは、ユーザーのショッピングカートに商品を追加し、データベース内のカート合計を更新することができます。楽観的更新を使用して、カートに商品をすぐに表示できます。
• 支払いを処理する：Server Actionは、サードパーティの支払いゲートウェイを使用して支払いを処理できます。Server Actionは、データベース内の注文ステータスを更新し、ユーザーに確認メールを送信することもできます。
• 製品レビューを送信する：Server Actionは、製品レビューを送信し、データベースに保存することができます。Server Actionは、製品の平均評価を計算し、製品詳細ページを更新することもできます。

ソーシャルメディアアプリケーション

• 新しいツイートを投稿する：Server Actionは、新しいツイートを投稿し、データベースに保存することができます。Server Actionは、ユーザーのタイムラインを更新し、フォロワーに通知することもできます。
• 投稿をいいねする：Server Actionは、投稿をいいねし、データベース内のいいね数を更新することができます。楽観的更新を使用して、更新されたいいね数をすぐに表示できます。
• ユーザーをフォローする：Server Actionは、ユーザーをフォローし、データベース内のフォロワー数とフォロー数を更新することができます。

コンテンツ管理システム（CMS）

• 新しいブログ投稿を作成する：Server Actionは、新しいブログ投稿を作成し、データベースに保存することができます。Server Actionは、投稿のスラッグを生成し、サイトマップを更新することもできます。
• ページを更新する：Server Actionは、ページを更新し、データベースに保存することができます。Server Actionは、ページのキャッシュを再検証して、更新されたコンテンツがユーザーに表示されるようにすることもできます。
• 変更を公開する：Server Actionは、データベースへの変更を公開し、すべての加入者に通知することができます。

国際化に関する考慮事項

グローバルなオーディエンス向けのアプリケーションを開発する場合、国際化（i18n）とローカリゼーション（l10n）を考慮することが不可欠です。国際化されたアプリケーションでReact Server Actionsを使用する場合のいくつかの考慮事項を次に示します。

• 異なる日付と時刻の形式の処理：`Intl`APIを使用して、ユーザーのロケールに従って日付と時刻の形式を設定します。
• 異なる数値形式の処理：`Intl`APIを使用して、ユーザーのロケールに従って数値を形式設定します。
• 異なる通貨の処理：`Intl`APIを使用して、ユーザーのロケールに従って通貨を形式設定します。
• エラーメッセージの翻訳：エラーメッセージをユーザーの言語に翻訳します。
• 右から左（RTL）言語のサポート：アラビア語やヘブライ語など、RTL言語をサポートするようにアプリケーションを構成します。

たとえば、日付入力を必要とするフォームを処理する場合、Server Actionは`Intl.DateTimeFormat`APIを使用して、ユーザーのロケールに従って日付を解析し、ユーザーの地域設定に関係なく日付が正しく解釈されるようにすることができます。

結論

React Server Actionsは、Reactアプリケーションでサーバー側のフォーム処理とデータ変更を簡素化するための強力なツールです。Reactコンポーネント内でサーバーサイドコードを直接記述できるため、Server Actionsはボイラープレートコードを削減し、セキュリティを強化し、パフォーマンスを向上させ、楽観的更新を可能にします。このガイドで概説されているベストプラクティスに従うことで、Server Actionsを活用して、より堅牢で、スケーラブルで、保守性の高いReactアプリケーションを構築できます。Reactが進化し続けるにつれて、Server Actionsは間違いなくウェブ開発の将来においてますます重要な役割を果たすでしょう。