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

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

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

什麼是 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 (
    

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

在此範例中，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 (
    

在此範例中，submitForm 是在伺服器上處理表單資料的伺服器操作，ContactForm 是使用此操作處理表單提交的用戶端元件。

結論：利用現代功能打造更好的 Web 應用程式

Next.js 中的 React 伺服器元件和伺服器操作為建立高效、現代的 Web 應用程式提供了強大的工具。透過利用這些功能，您可以提高效能、簡化伺服器端邏輯並創建響應更快的使用者體驗。

當您建立 Next.js 應用程式時，請考慮合併 React 伺服器元件和伺服器操作，以充分利用 Web 開發的最新進展。

編碼愉快！

？ ✨