在 Next.js 中使用 React 伺服器元件和伺服器操作-js教程-PHP中文網

在 Next.js 中使用 React 伺服器元件和伺服器操作

Mary-Kate Olsen

發布： 2024-09-23 20:31:02

原創

994 人瀏覽過

簡介：使用 React 伺服器元件增強 Next.js

Next.js 已經發展到包含 React Server Components 和 Server Actions 等強大功能，它們提供了一種處理伺服器端渲染和邏輯的新方法。這些功能提供了一種更有效率、更簡化的方法來建立 Web 應用程序，可讓您在伺服器上獲取資料並渲染元件，而不會影響效能。

在這篇文章中，我們將透過實際範例和程式碼片段探索如何在 Next.js 中使用 React 伺服器元件和伺服器操作。

Using React Server Components and Server Actions in Next.js

什麼是 React 伺服器元件？

React 伺服器元件（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 是一個伺服器元件，用於在伺服器上取得使用者資料並呈現它。

什麼是伺服器操作？

伺服器操作是在伺服器上執行以回應使用者互動或其他事件的函數。它們允許您直接從 React 元件處理伺服器端邏輯，例如表單提交或 API 請求。

伺服器操作的好處

簡化的伺服器邏輯：直接在元件中編寫伺服器端程式碼。
增強的安全性：在伺服器而不是客戶端上處理敏感操作。
提高效能：減少客戶端 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 是使用此操作處理表單提交的用戶端元件。