Server Actions trong Next.js 14: Làm chủ các phương pháp xử lý Form tốt nhất

Next.js 14 giới thiệu các tính năng mạnh mẽ để xây dựng ứng dụng web hiệu năng và thân thiện với người dùng. Trong số đó, Server Actions nổi bật như một cách thức đột phá để xử lý việc gửi form và các biến đổi dữ liệu (data mutations) trực tiếp trên máy chủ. Hướng dẫn này cung cấp một cái nhìn tổng quan toàn diện về Server Actions trong Next.js 14, tập trung vào các phương pháp tốt nhất để xử lý form, xác thực dữ liệu, bảo mật và các kỹ thuật nâng cao. Chúng ta sẽ khám phá các ví dụ thực tế và cung cấp những hiểu biết hữu ích để giúp bạn xây dựng các ứng dụng web mạnh mẽ và có khả năng mở rộng.

Next.js Server Actions là gì?

Server Actions là các hàm bất đồng bộ chạy trên máy chủ và có thể được gọi trực tiếp từ các component React. Chúng loại bỏ sự cần thiết của các API route truyền thống để xử lý việc gửi form và biến đổi dữ liệu, giúp mã nguồn đơn giản hơn, cải thiện bảo mật và tăng cường hiệu suất. Server Actions là các React Server Components (RSC), có nghĩa là chúng được thực thi trên máy chủ, giúp trang tải ban đầu nhanh hơn và cải thiện SEO.

Lợi ích chính của Server Actions:

Mã nguồn đơn giản: Giảm mã nguồn lặp lại bằng cách loại bỏ sự cần thiết của các API route riêng biệt.
Bảo mật cải thiện: Việc thực thi phía máy chủ giảm thiểu các lỗ hổng phía máy khách.
Hiệu suất tăng cường: Thực thi các biến đổi dữ liệu trực tiếp trên máy chủ để có thời gian phản hồi nhanh hơn.
SEO tối ưu hóa: Tận dụng server-side rendering để các công cụ tìm kiếm lập chỉ mục tốt hơn.
An toàn kiểu dữ liệu (Type Safety): Hưởng lợi từ an toàn kiểu dữ liệu từ đầu đến cuối với TypeScript.

Thiết lập dự án Next.js 14 của bạn

Trước khi đi sâu vào Server Actions, hãy đảm bảo bạn đã thiết lập một dự án Next.js 14. Nếu bạn bắt đầu từ đầu, hãy tạo một dự án mới bằng lệnh sau:

npx create-next-app@latest my-next-app

Hãy chắc chắn rằng dự án của bạn đang sử dụng cấu trúc thư mục app để tận dụng tối đa Server Components và Actions.

Xử lý Form cơ bản với Server Actions

Hãy bắt đầu với một ví dụ đơn giản: một form gửi dữ liệu để tạo một mục mới trong cơ sở dữ liệu. Chúng ta sẽ sử dụng một form đơn giản với một trường nhập liệu và một nút gửi.

Ví dụ: Tạo một mục mới

Đầu tiên, hãy định nghĩa một hàm Server Action bên trong component React của bạn. Hàm này sẽ xử lý logic gửi form trên máy chủ.

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Mô phỏng tương tác với cơ sở dữ liệu
  console.log('Tạo mục:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Mô phỏng độ trễ

  console.log('Mục đã được tạo thành công!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    await createItem(formData);
    setIsSubmitting(false);
  }

  return (
    
      Tên mục:
      
      
    
  );
}

Giải thích:

Chỉ thị 'use client' cho biết đây là một client component.
Hàm createItem được đánh dấu bằng chỉ thị 'use server', cho biết nó là một Server Action.
Hàm handleSubmit là một hàm phía máy khách gọi server action. Nó cũng xử lý trạng thái giao diện người dùng như vô hiệu hóa nút trong khi gửi.
Thuộc tính action của phần tử <form> được đặt thành hàm handleSubmit.
Phương thức formData.get('name') lấy giá trị của trường nhập liệu 'name'.
await new Promise mô phỏng một hoạt động cơ sở dữ liệu và thêm độ trễ.

Xác thực dữ liệu

Xác thực dữ liệu là rất quan trọng để đảm bảo tính toàn vẹn của dữ liệu và ngăn chặn các lỗ hổng bảo mật. Server Actions cung cấp một cơ hội tuyệt vời để thực hiện xác thực phía máy chủ. Cách tiếp cận này giúp giảm thiểu rủi ro liên quan đến việc chỉ xác thực phía máy khách.

Ví dụ: Xác thực dữ liệu đầu vào

Sửa đổi Server Action createItem để bao gồm logic xác thực.

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  if (!name || name.length < 3) {
    throw new Error('Tên mục phải có ít nhất 3 ký tự.');
  }

  // Mô phỏng tương tác với cơ sở dữ liệu
  console.log('Tạo mục:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Mô phỏng độ trễ

  console.log('Mục đã được tạo thành công!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Đã xảy ra lỗi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Tên mục:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Giải thích:

Hàm createItem giờ đây kiểm tra xem name có hợp lệ không (ít nhất 3 ký tự).
Nếu xác thực thất bại, một lỗi sẽ được ném ra.
Hàm handleSubmit được cập nhật để bắt bất kỳ lỗi nào được ném ra bởi Server Action và hiển thị thông báo lỗi cho người dùng.

Sử dụng các thư viện xác thực

Đối với các kịch bản xác thực phức tạp hơn, hãy xem xét sử dụng các thư viện xác thực như:

Zod: Một thư viện khai báo và xác thực schema ưu tiên TypeScript.
Yup: Một trình xây dựng schema JavaScript để phân tích, xác thực và chuyển đổi giá trị.

Đây là một ví dụ sử dụng Zod:

// app/utils/validation.ts
import { z } from 'zod';

export const CreateItemSchema = z.object({
  name: z.string().min(3, 'Tên mục phải có ít nhất 3 ký tự.'),
});

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { CreateItemSchema } from '../utils/validation';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  const validatedFields = CreateItemSchema.safeParse({ name });

  if (!validatedFields.success) {
    return { errors: validatedFields.error.flatten().fieldErrors };
  }

  // Mô phỏng tương tác với cơ sở dữ liệu
  console.log('Tạo mục:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Mô phỏng độ trễ

  console.log('Mục đã được tạo thành công!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Đã xảy ra lỗi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Tên mục:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Giải thích:

CreateItemSchema định nghĩa các quy tắc xác thực cho trường name bằng Zod.
Phương thức safeParse cố gắng xác thực dữ liệu đầu vào. Nếu xác thực thất bại, nó trả về một đối tượng chứa các lỗi.
Đối tượng errors chứa thông tin chi tiết về các lỗi xác thực.

Các cân nhắc về bảo mật

Server Actions tăng cường bảo mật bằng cách thực thi mã trên máy chủ, nhưng vẫn rất quan trọng để tuân theo các phương pháp bảo mật tốt nhất để bảo vệ ứng dụng của bạn khỏi các mối đe dọa phổ biến.

Ngăn chặn Tấn công Giả mạo Yêu cầu Liên trang (CSRF)

Các cuộc tấn công CSRF khai thác sự tin tưởng mà một trang web dành cho trình duyệt của người dùng. Để ngăn chặn các cuộc tấn công CSRF, hãy triển khai các cơ chế bảo vệ CSRF.

Next.js tự động xử lý việc bảo vệ CSRF khi sử dụng Server Actions. Framework tạo và xác thực một mã thông báo CSRF cho mỗi lần gửi form, đảm bảo rằng yêu cầu bắt nguồn từ ứng dụng của bạn.

Xử lý Xác thực và Phân quyền Người dùng

Đảm bảo rằng chỉ những người dùng được ủy quyền mới có thể thực hiện một số hành động nhất định. Triển khai các cơ chế xác thực và phân quyền để bảo vệ dữ liệu và chức năng nhạy cảm.

Đây là một ví dụ sử dụng NextAuth.js để bảo vệ một Server Action:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '../../app/api/auth/[...nextauth]/route';

async function createItem(formData: FormData) {
  'use server'

  const session = await getServerSession(authOptions);

  if (!session) {
    throw new Error('Không được phép');
  }

  const name = formData.get('name') as string;

  // Mô phỏng tương tác với cơ sở dữ liệu
  console.log('Tạo mục:', name, 'bởi người dùng:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Mô phỏng độ trễ

  console.log('Mục đã được tạo thành công!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Đã xảy ra lỗi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Tên mục:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Giải thích:

Hàm getServerSession lấy thông tin phiên của người dùng.
Nếu người dùng không được xác thực (không có phiên), một lỗi sẽ được ném ra, ngăn không cho Server Action thực thi.

Làm sạch dữ liệu đầu vào

Làm sạch dữ liệu đầu vào để ngăn chặn các cuộc tấn công Cross-Site Scripting (XSS). Các cuộc tấn công XSS xảy ra khi mã độc được tiêm vào một trang web, có khả năng xâm phạm dữ liệu người dùng hoặc chức năng ứng dụng.

Sử dụng các thư viện như DOMPurify hoặc sanitize-html để làm sạch dữ liệu đầu vào do người dùng cung cấp trước khi xử lý nó trong Server Actions của bạn.

Các kỹ thuật nâng cao

Bây giờ chúng ta đã nắm được những điều cơ bản, hãy khám phá một số kỹ thuật nâng cao để sử dụng Server Actions hiệu quả.

Cập nhật lạc quan (Optimistic Updates)

Cập nhật lạc quan cung cấp trải nghiệm người dùng tốt hơn bằng cách cập nhật giao diện người dùng ngay lập tức như thể hành động sẽ thành công, ngay cả trước khi máy chủ xác nhận. Nếu hành động thất bại trên máy chủ, giao diện người dùng sẽ được hoàn nguyên về trạng thái trước đó.

// app/components/UpdateItemForm.tsx
'use client';

import { useState } from 'react';

async function updateItem(id: string, formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Mô phỏng tương tác với cơ sở dữ liệu
  console.log('Cập nhật mục:', id, 'với tên:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Mô phỏng độ trễ

  // Mô phỏng thất bại (cho mục đích minh họa)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error('Cập nhật mục thất bại.');
  }

  console.log('Mục đã được cập nhật thành công!');
  return { name }; // Trả về tên đã cập nhật
}

export default function UpdateItemForm({ id, initialName }: { id: string; initialName: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [itemName, setItemName] = useState(initialName);

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);

    // Cập nhật giao diện người dùng một cách lạc quan
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      //Nếu thành công thì cập nhật đã được phản ánh trong UI thông qua setItemName

    } catch (error: any) {
      setErrorMessage(error.message || 'Đã xảy ra lỗi.');
      // Hoàn nguyên giao diện người dùng khi có lỗi
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Tên hiện tại: {itemName}
      
        Tên mục mới:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Giải thích:

Trước khi gọi Server Action, giao diện người dùng được cập nhật ngay lập tức với tên mục mới bằng cách sử dụng setItemName.
Nếu Server Action thất bại, giao diện người dùng được hoàn nguyên về tên mục ban đầu.

Xác thực lại dữ liệu (Revalidating Data)

Sau khi một Server Action sửa đổi dữ liệu, bạn có thể cần xác thực lại dữ liệu đã được lưu vào bộ nhớ đệm để đảm bảo rằng giao diện người dùng phản ánh những thay đổi mới nhất. Next.js cung cấp một số cách để xác thực lại dữ liệu:

Revalidate Path: Xác thực lại bộ nhớ đệm cho một đường dẫn cụ thể.
Revalidate Tag: Xác thực lại bộ nhớ đệm cho dữ liệu được liên kết với một thẻ cụ thể.

Đây là một ví dụ về việc xác thực lại một đường dẫn sau khi tạo một mục mới:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { revalidatePath } from 'next/cache';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // Mô phỏng tương tác với cơ sở dữ liệu
  console.log('Tạo mục:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // Mô phỏng độ trễ

  console.log('Mục đã được tạo thành công!');

  revalidatePath('/items'); // Xác thực lại đường dẫn /items
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'Đã xảy ra lỗi.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      
        Tên mục:
        
        
      
      {errorMessage && {errorMessage}}
    
  );
}

Giải thích:

Hàm revalidatePath('/items') làm mất hiệu lực bộ nhớ đệm cho đường dẫn /items, đảm bảo rằng yêu cầu tiếp theo đến đường dẫn đó sẽ lấy dữ liệu mới nhất.

Các phương pháp tốt nhất cho Server Actions

Để tối đa hóa lợi ích của Server Actions, hãy xem xét các phương pháp tốt nhất sau:

Giữ Server Actions nhỏ và tập trung: Server Actions nên thực hiện một tác vụ duy nhất, được định nghĩa rõ ràng. Tránh logic phức tạp bên trong Server Actions để duy trì khả năng đọc và kiểm thử.
Sử dụng tên mô tả: Đặt cho Server Actions của bạn những cái tên mô tả rõ ràng mục đích của chúng.
Xử lý lỗi một cách duyên dáng: Triển khai xử lý lỗi mạnh mẽ để cung cấp phản hồi thông tin cho người dùng và ngăn chặn sự cố ứng dụng.
Xác thực dữ liệu kỹ lưỡng: Thực hiện xác thực dữ liệu toàn diện để đảm bảo tính toàn vẹn của dữ liệu và ngăn chặn các lỗ hổng bảo mật.
Bảo mật Server Actions của bạn: Triển khai các cơ chế xác thực và phân quyền để bảo vệ dữ liệu và chức năng nhạy cảm.
Tối ưu hóa hiệu suất: Theo dõi hiệu suất của Server Actions và tối ưu hóa chúng khi cần thiết để đảm bảo thời gian phản hồi nhanh.
Sử dụng bộ nhớ đệm hiệu quả: Tận dụng các cơ chế bộ nhớ đệm của Next.js để cải thiện hiệu suất và giảm tải cho cơ sở dữ liệu.

Những cạm bẫy thường gặp và cách tránh

Mặc dù Server Actions mang lại nhiều lợi ích, có một số cạm bẫy phổ biến cần lưu ý:

Server Actions quá phức tạp: Tránh đặt quá nhiều logic vào một Server Action duy nhất. Chia nhỏ các tác vụ phức tạp thành các hàm nhỏ hơn, dễ quản lý hơn.
Bỏ qua việc xử lý lỗi: Luôn bao gồm xử lý lỗi để bắt các lỗi không mong muốn và cung cấp phản hồi hữu ích cho người dùng.
Phớt lờ các phương pháp bảo mật tốt nhất: Tuân thủ các phương pháp bảo mật tốt nhất để bảo vệ ứng dụng của bạn khỏi các mối đe dọa phổ biến như XSS và CSRF.
Quên xác thực lại dữ liệu: Đảm bảo rằng bạn xác thực lại dữ liệu đã được lưu vào bộ nhớ đệm sau khi một Server Action sửa đổi dữ liệu để giữ cho giao diện người dùng luôn được cập nhật.

Kết luận

Server Actions trong Next.js 14 cung cấp một cách mạnh mẽ và hiệu quả để xử lý việc gửi form và các biến đổi dữ liệu trực tiếp trên máy chủ. Bằng cách tuân theo các phương pháp tốt nhất được nêu trong hướng dẫn này, bạn có thể xây dựng các ứng dụng web mạnh mẽ, an toàn và hiệu năng. Hãy tận dụng Server Actions để đơn giản hóa mã nguồn, tăng cường bảo mật và cải thiện trải nghiệm người dùng tổng thể. Khi bạn tích hợp những nguyên tắc này, hãy xem xét tác động toàn cầu của các lựa chọn phát triển của bạn. Đảm bảo rằng các quy trình xử lý form và dữ liệu của bạn có thể truy cập, an toàn và thân thiện với người dùng cho các đối tượng quốc tế đa dạng. Sự cam kết này về tính toàn diện không chỉ cải thiện khả năng sử dụng của ứng dụng mà còn mở rộng phạm vi và hiệu quả của nó trên quy mô toàn cầu.