はじめに: 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 (
    

      
{user.name}
      
{user.email}
    
  );
}

この例では、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 (
    

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

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

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

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

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

?✨