Next.js での React サーバー コンポーネントとサーバー アクションの使用

はじめに: React サーバー コンポーネントを使用した Next.js の強化

Next.js は、サーバー側のレンダリングとロジックを処理する新しい方法を提供する React サーバー コンポーネントやサーバー アクションなどの強力な機能を組み込むように進化しました。これらの機能は、Web アプリケーションを構築するためのより効率的かつ合理的なアプローチを提供し、パフォーマンスを損なうことなくデータをフェッチし、サーバー上でコンポーネントをレンダリングできるようにします。

このブログ投稿では、実用的な例とコード スニペットを使用して、Next.js で React サーバー コンポーネントとサーバー アクションを使用する方法を説明します。

React サーバー コンポーネントとは何ですか?

React Server Components (RSC) は、React によって導入された新しいタイプのコンポーネントで、サーバー上でコンポーネントをレンダリングできるようにします。このアプローチは、レンダリング作業をサーバーにオフロードすることで、クライアントに送信される JavaScript の量を削減し、パフォーマンスを向上させるのに役立ちます。

React サーバー コンポーネントの利点

• パフォーマンスの向上: サーバー上でレンダリングすることで、クライアント側の JavaScript の量が減り、読み込み時間が短縮されます。
• ユーザー エクスペリエンスの強化: 最初のページの読み込みが高速になり、操作がスムーズになりました。
• 簡略化されたデータ取得: サーバー上でデータを取得し、コンポーネントに直接渡します。

例: サーバーコンポーネントの作成

Next.js アプリケーションの React サーバー コンポーネントの基本的な例を次に示します。

// app/components/UserProfile.server.js
import { getUserData } from "../lib/api";

export default async function UserProfile() {
  const user = await getUserData();

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

この例では、UserProfile はサーバー上のユーザー データを取得してレンダリングするサーバー コンポーネントです。

サーバーアクションとは何ですか?

サーバー アクションは、ユーザーの操作やその他のイベントに応じてサーバー上で実行される機能です。これにより、フォーム送信や API リクエストなどのサーバー側ロジックを React コンポーネントから直接処理できるようになります。

サーバーアクションの利点

• 簡素化されたサーバー ロジック: サーバー側のコードをコンポーネントに直接記述します。
• セキュリティの強化: クライアントではなくサーバー上で機密性の高い操作を処理します。
• パフォーマンスの向上: クライアント側の JavaScript を削減し、タスクをサーバーにオフロードします。

例: サーバーアクションの使用

Next.js アプリケーションでサーバー アクションを使用してフォームの送信を処理する方法は次のとおりです。

// app/actions/submitForm.js
import { saveFormData } from "../lib/api";

export async function submitForm(data) {
  await saveFormData(data);
  return { success: true };
}

// app/components/ContactForm.js
"use client";

import { submitForm } from "../actions/submitForm";

export default function ContactForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await submitForm(Object.fromEntries(formData));
    if (result.success) {
      alert("Form submitted successfully!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" required />
      </label>
      <label>
        Email:
        <input type="email" name="email" required />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

この例では、submitForm はサーバー上でフォーム データを処理するサーバー アクションであり、ContactForm はこのアクションを使用してフォーム送信を処理するクライアント コンポーネントです。

結論: より良い Web アプリを実現するために最新の機能を活用する

Next.js の React サーバー コンポーネントとサーバー アクションは、効率的で最新の Web アプリケーションを構築するための強力なツールを提供します。これらの機能を活用することで、パフォーマンスを向上させ、サーバー側のロジックを簡素化し、より応答性の高いユーザー エクスペリエンスを作成できます。

Next.js アプリケーションを構築するときは、Web 開発の最新の進歩を最大限に活用するために、React サーバー コンポーネントとサーバー アクションを組み込むことを検討してください。

コーディングを楽しんでください!

?✨

以上がNext.js での React サーバー コンポーネントとサーバー アクションの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。