M

MLOG

Tiếng Việt

Khám phá React Server Actions, một tính năng mạnh mẽ để xử lý việc gửi form và thay đổi dữ liệu trực tiếp trên máy chủ, giúp đơn giản hóa việc phát triển React và tăng cường bảo mật.

React Server Actions: Đơn Giản Hóa Xử Lý Form Phía Máy Chủ

React Server Actions, được giới thiệu trong React 18 và được cải tiến đáng kể trong Next.js, mang đến một cách tiếp cận đột phá để xử lý việc gửi form và thay đổi dữ liệu trực tiếp trên máy chủ. Tính năng mạnh mẽ này giúp đơn giản hóa quy trình phát triển, tăng cường bảo mật và cải thiện hiệu suất so với các phương pháp tìm nạp và thao tác dữ liệu phía máy khách truyền thống.

React 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 cho phép bạn thực hiện các tác vụ phía máy chủ, chẳng hạn như:

Lợi thế chính của Server Actions là chúng cho phép bạn viết mã phía máy chủ ngay trong các component React của mình, loại bỏ nhu cầu về các API route riêng biệt và logic tìm nạp dữ liệu phức tạp phía máy khách. Việc kết hợp giao diện người dùng và logic phía máy chủ này dẫn đến một codebase dễ bảo trì và hiệu quả hơn.

Lợi ích của việc sử dụng React Server Actions

Sử dụng React Server Actions mang lại một số lợi ích đáng kể:

Phát triển đơn giản hóa

Server Actions giảm thiểu mã soạn sẵn (boilerplate code) bằng cách cho phép bạn xử lý việc gửi form và thay đổi dữ liệu trực tiếp trong các component React của mình. Điều này loại bỏ sự cần thiết của các API endpoint riêng biệt và logic tìm nạp dữ liệu phức tạp phía máy khách, giúp tinh giản quy trình phát triển và làm cho mã của bạn dễ hiểu và dễ bảo trì hơn. Hãy xem xét một form liên hệ đơn giản. Nếu không có Server Actions, bạn sẽ cần một API route riêng để xử lý việc gửi form, JavaScript phía máy khách để gửi dữ liệu và logic xử lý lỗi ở cả máy khách và máy chủ. Với Server Actions, tất cả những điều này có thể được xử lý ngay trong chính component đó.

Tăng cường bảo mật

Bằng cách chạy mã trên máy chủ, Server Actions làm giảm bề mặt tấn công của ứng dụng của bạn. Dữ liệu nhạy cảm và logic nghiệp vụ được giữ xa khỏi máy khách, ngăn chặn người dùng độc hại can thiệp vào chúng. Ví dụ, thông tin đăng nhập cơ sở dữ liệu hoặc khóa API không bao giờ bị lộ trong mã phía máy khách. Tất cả các tương tác với cơ sở dữ liệu đều diễn ra trên máy chủ, giảm thiểu nguy cơ tấn công SQL injection hoặc truy cập dữ liệu trái phép.

Cải thiện hiệu suất

Server Actions có thể cải thiện hiệu suất bằng cách giảm lượng JavaScript cần được tải xuống và thực thi trên máy khách. Điều này đặc biệt có lợi cho người dùng trên các thiết bị cấu hình thấp hoặc có kết nối internet chậm. Việc xử lý dữ liệu diễn ra trên máy chủ, và chỉ những cập nhật giao diện người dùng cần thiết mới được gửi đến máy khách, dẫn đến thời gian tải trang nhanh hơn và trải nghiệm người dùng mượt mà hơn.

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

Server Actions tích hợp liền mạch với Suspense và Transitions của React, cho phép cập nhật lạc quan. Cập nhật lạc quan cho phép bạn cập nhật giao diện người dùng ngay lập tức, ngay cả trước khi máy chủ xác nhận hành động. Điều này mang lại trải nghiệm người dùng phản hồi nhanh và hấp dẫn hơn, vì người dùng không phải đợi máy chủ phản hồi trước khi thấy kết quả hành động của họ. Trong thương mại điện tử, việc thêm một mặt hàng vào giỏ hàng có thể được hiển thị ngay lập tức trong khi máy chủ xác nhận việc thêm vào ở chế độ nền.

Nâng cao lũy tiến (Progressive Enhancement)

Server Actions hỗ trợ nâng cao lũy tiến, có nghĩa là ứng dụng của bạn vẫn có thể hoạt động ngay cả khi JavaScript bị tắt hoặc không tải được. Khi JavaScript bị tắt, các form sẽ gửi đi như các form HTML truyền thống, và máy chủ sẽ xử lý việc gửi và chuyển hướng người dùng đến một trang mới. Điều này đảm bảo rằng ứng dụng của bạn vẫn có thể truy cập được bởi tất cả người dùng, bất kể cấu hình trình duyệt hoặc điều kiện mạng của họ. Điều này đặc biệt quan trọng cho khả năng truy cập và SEO.

Cách sử dụng React Server Actions

Để sử dụng React Server Actions, bạn cần sử dụng một framework hỗ trợ chúng, chẳng hạn như Next.js. Dưới đây là hướng dẫn từng bước:

1. Định nghĩa Server Action

Tạo một hàm bất đồng bộ sẽ chạy trên máy chủ. Hàm này nên xử lý logic bạn muốn thực thi trên máy chủ, chẳng hạn như cập nhật cơ sở dữ liệu hoặc gọi một API. Đánh dấu hàm bằng chỉ thị `"use server"` ở trên cùng để chỉ ra rằng đó là một Server Action. Chỉ thị này cho trình biên dịch React biết để xử lý hàm như một hàm phía máy chủ và tự động xử lý việc tuần tự hóa và giải tuần tự hóa dữ liệu giữa máy khách và máy chủ.

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Xóa bộ đệm của route
    return { message: 'Tin nhắn đã được lưu thành công!' };
  } catch (e) {
    return { message: 'Không thể lưu tin nhắn' };
  }
}

Giải thích:

2. Nhập và sử dụng Server Action trong Component của bạn

Nhập Server Action vào component React của bạn và sử dụng nó làm prop `action` trên một phần tử form. Hook `useFormState` có thể được sử dụng để quản lý trạng thái của form và hiển thị phản hồi cho người dùng.

// app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Giải thích:

3. Xử lý dữ liệu Form

Bên trong Server Action, bạn có thể truy cập dữ liệu form bằng cách sử dụng `FormData` API. API này cung cấp một cách tiện lợi để truy cập giá trị của các trường trong form.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. Xử lý lỗi

Sử dụng các khối `try...catch` để xử lý các lỗi có thể xảy ra trong quá trình thực thi Server Action. Trả về một thông báo lỗi trong đối tượng trạng thái để hiển thị cho người dùng.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Không thể lưu tin nhắn' };
  }
}

5. Xác thực lại dữ liệu

Sau khi một Server Action đã thay đổi dữ liệu thành công, bạn có thể cần xác thực lại bộ đệm dữ liệu để đảm bảo rằng giao diện người dùng phản ánh những thay đổi mới nhất. Sử dụng các hàm `revalidatePath` hoặc `revalidateTag` từ `next/cache` để xác thực lại các đường dẫn hoặc thẻ cụ thể.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Xóa bộ đệm của route
  // ...
}

Sử dụng nâng cao

Thay đổi dữ liệu

Server Actions đặc biệt phù hợp để thay đổi dữ liệu, chẳng hạn như cập nhật cơ sở dữ liệu hoặc các API bên ngoài. Bạn có thể sử dụng Server Actions để xử lý các thay đổi dữ liệu phức tạp đòi hỏi logic phía máy chủ, chẳng hạn như xác thực dữ liệu, thực hiện tính toán hoặc tương tác với nhiều nguồn dữ liệu. Hãy xem xét một kịch bản nơi bạn cần cập nhật hồ sơ người dùng và gửi email xác nhận. Một Server Action có thể xử lý cả việc cập nhật cơ sở dữ liệu và quy trình gửi email trong một hoạt động đơn lẻ, nguyên tử.

Xác thực và ủy quyền

Server Actions có thể được sử dụng để xử lý xác thực và ủy quyền. Bằng cách thực hiện kiểm tra xác thực và ủy quyền trên máy chủ, bạn có thể đảm bảo rằng chỉ những người dùng được ủy quyền mới có quyền truy cập vào dữ liệu và chức năng nhạy cảm. Bạn có thể sử dụng Server Actions để xử lý đăng nhập, đăng ký và đặt lại mật khẩu của người dùng. Ví dụ, một Server Action có thể xác minh thông tin đăng nhập của người dùng so với cơ sở dữ liệu và trả về một token có thể được sử dụng để xác thực các yêu cầu tiếp theo.

Edge Functions

Server Actions có thể được triển khai dưới dạng Edge Functions, chạy trên một mạng lưới máy chủ toàn cầu gần gũi với người dùng của bạn. Điều này có thể giảm đáng kể độ trễ và cải thiện hiệu suất, đặc biệt đối với người dùng ở các vị trí địa lý phân tán. Edge Functions là lý tưởng để xử lý các Server Actions đòi hỏi độ trễ thấp, chẳng hạn như cập nhật dữ liệu thời gian thực hoặc cung cấp nội dung cá nhân hóa. Next.js cung cấp hỗ trợ tích hợp để triển khai Server Actions dưới dạng Edge Functions.

Streaming

Server Actions hỗ trợ streaming, cho phép bạn gửi dữ liệu đến máy khách theo từng đoạn khi nó có sẵn. Điều này có thể cải thiện hiệu suất cảm nhận được của ứng dụng của bạn, đặc biệt đối với các Server Actions mất nhiều thời gian để thực thi. Streaming đặc biệt hữu ích để xử lý các tập dữ liệu lớn hoặc các tính toán phức tạp. Ví dụ, bạn có thể stream kết quả tìm kiếm đến máy khách khi chúng được lấy từ cơ sở dữ liệu, mang lại trải nghiệm người dùng phản hồi nhanh hơn.

Các phương pháp hay nhất (Best Practices)

Dưới đây là một số phương pháp hay nhất cần tuân theo khi sử dụng React Server Actions:

Ví dụ trong thế giới thực

Hãy xem xét một số ví dụ thực tế về cách React Server Actions có thể được sử dụng trong các loại ứng dụng khác nhau:

Ứng dụng thương mại điện tử

Ứng dụng mạng xã hội

Hệ thống quản lý nội dung (CMS)

Những lưu ý về quốc tế hóa

Khi phát triển các ứng dụng cho đối tượng toàn cầu, điều cần thiết là phải xem xét quốc tế hóa (i18n) và địa phương hóa (l10n). Dưới đây là một số lưu ý khi sử dụng React Server Actions trong các ứng dụng được quốc tế hóa:

Ví dụ, khi xử lý một form yêu cầu nhập ngày tháng, một Server Action có thể sử dụng `Intl.DateTimeFormat` API để phân tích ngày tháng theo ngôn ngữ của người dùng, đảm bảo rằng ngày tháng được hiểu đúng bất kể cài đặt khu vực của người dùng.

Kết luận

React Server Actions là một công cụ mạnh mẽ để đơn giản hóa việc xử lý form phía máy chủ và thay đổi dữ liệu trong các ứng dụng React. Bằng cách cho phép bạn viết mã phía máy chủ trực tiếp trong các component React của mình, Server Actions giảm thiểu mã soạn sẵn, tăng cường bảo mật, cải thiện hiệu suất và cho phép cập nhật lạc quan. Bằng cách tuân theo các phương pháp hay nhất được nêu trong hướng dẫn này, bạn có thể tận dụng Server Actions để xây dựng các ứng dụng React mạnh mẽ, có khả năng mở rộng và dễ bảo trì hơn. Khi React tiếp tục phát triển, Server Actions chắc chắn sẽ đóng một vai trò ngày càng quan trọng trong tương lai của phát triển web.