Với sự ra mắt của Next.js 14, Server action hiện đã ổn định và rất phù hợp để ứng dụng vào Project. Vậy server action là gì và làm cách nào để sử dụng chúng để tìm nạp và cập nhật dữ liệu từ các API bên ngoài?
Bài viết này cần bạn có kiến thức nền tảng về reactjs – nextjs
Next.js là một khung React cho phép static site generation (SSG)server-side rendering (SSR) và tincremental static regeneration (ISR). Nó được biết đến với hiệu suất, khả năng mở rộng và dễ sử dụng.
Một trong những tính năng mới thú vị nhất trong Next.js 14 là server action. Server action cho phép bạn thực thi mã phía máy chủ mà không cần tạo các tuyến API chuyên dụng. Tác vụ máy chủ có thể hữu ích trong nhiều tác vụ khác nhau, chẳng hạn như tìm nạp dữ liệu từ API bên ngoài, thực hiện logic nghiệp vụ hoặc thậm chí cập nhật cơ sở dữ liệu của bạn.
Tìm hiểu Server ACTION Next.js
Server action đã là một phần của Next.js kể từ phiên bản 13. Tuy nhiên, trong phiên bản 14 của khung, Server action ổn định và được tích hợp theo mặc định làm tính năng của khung.
Bạn có thể sử dụng Tác vụ máy chủ cho nhiều trường hợp sử dụng khác nhau, nhưng chúng rất phù hợp cho những trường hợp sau:
- Tìm nạp dữ liệu từ các API bên ngoài: Server action có thể tìm nạp dữ liệu từ các API bên ngoài mà không ảnh hưởng đến hiệu suất hoặc bảo mật.
- Thực hiện logic nghiệp vụ: Server action có thể thực hiện logic nghiệp vụ yêu cầu thực thi máy chủ, chẳng hạn như xác thực thông tin đầu vào của người dùng hoặc xử lý thanh toán.
- Cập nhật cơ sở dữ liệu của bạn: Server action có thể cập nhật cơ sở dữ liệu của bạn mà không cần tạo các tuyến API riêng biệt.
Cách hoạt động của Server action
Server action Next.js là các hàm JavaScript không đồng bộ chạy trên máy chủ để phản hồi các tương tác của người dùng trên máy khách. Server action được thực hiện nhờ một số quy trình kỹ thuật phức tạp, nhưng ý tưởng cơ bản như sau:
- Trong client, hành động của người dùng hoặc điều kiện logic nghiệp vụ sẽ kích hoạt lệnh gọi hàm tới server action. Đối với developer, điều này không khác gì việc gọi một hàm không đồng bộ.
- Next.js sẽ tuần tự hóa các tham số yêu cầu (chẳng hạn như mọi dữ liệu biểu mẫu hoặc tham số chuỗi truy vấn) và gửi chúng đến máy chủ.
- Sau đó, máy chủ sẽ giải tuần tự hóa các tham số yêu cầu và thực thi một chức năng đại diện cho server action.
- Sau khi server action hoàn tất việc thực thi, máy chủ sẽ tuần tự hóa phản hồi và gửi lại cho Next.js.
- Sau đó, Next.js sẽ giải tuần tự hóa phản hồi và gửi nó trở lại giao diện người dùng. Khi promise được giải quyết, giao diện người dùng sẽ tiếp tục thực thi phía client.
Cú pháp của server action
Bạn có thể xác định server action ở hai nơi:
Trong server component
// app/page.ts
export default function ServerComponent() {
async function myAction() {
'use server'
// ...
}
}Trong 1 tập tin riêng biệt để có thể gọi lại sử dụng
// app/actions.ts
'use server'
export async function myAction() {
// ...
}Cách gọi server action
Bạn có thể sử dụng các trường hợp sau:
- Sử dụng action group
Bạn có thể sử dụng prop action để gọi server action từ bất kỳ phần tử HTML nào, chẳng hạn như
<button>, <input type="submit">, or <form>Ví dụ: đoạn mã sau sẽ gọi server action likeThisArticle khi người dùng nhấp vào nút “Add to Shopping Cart”:
<button type="button" action={likeThisArticle}>Like this article</button>- Sử dụng useFormState hook
Bạn có thể sử dụng prop formAction để gọi Server Action từ phần tử .
Ví dụ: đoạn mã sau sẽ gọi server action addComment khi người dùng gửi biểu mẫu:
'use client'
import { useFormState } from 'react';
import { addComment } from '@/actions/add-comment';
export default function ArticleComment({ initialState }) {
const [state, formAction] = useFormState(addComment, initialState)
return (
<form onClick={formAction}>
Add Comment
</button>
)
}- Sử dụng startTransition hook
Bạn có thể sử dụng hook startTransition để gọi server action từ bất kỳ thành phần nào trong ứng dụng Next.js của mình.
Ví dụ: đoạn mã sau sẽ gọi server action addComment.
'use client'
import { useTransition } from 'react';
import { addComment } from '@/actions/add-comment';
export default function ArticleComment() {
const [isPending, startTransition] = useTransition()
function onAddComment() {
startTransition(() => {
addComment('This article is nothing but great!');
});
}
return (
<button onClick={() => onAddComment()}>
Add Comment
</button>
)
}Hook startTransition đảm bảo rằng các đợt cập nhật trạng thái với các cập nhật trạng thái khác đang diễn ra cùng lúc. Việc sử dụng startTransition có thể cải thiện hiệu suất ứng dụng của bạn bằng cách giảm số lần hiển thị lại được yêu cầu.
Gửi dữ liệu tới API bên ngoài bằng cách sử dụng server action
Bây giờ chúng ta đã hiểu cơ bản về server action, giờ chúng ta sử dụng server action để gửi dữ liệu đến API của bên thứ ba.
Để bắt đầu, bạn sẽ tạo một server action sẽ kích hoạt khi gửi form. Như bạn sẽ thấy sau, hàm này khác với các hàm khác được kích hoạt bởi lệnh gọi hàm JavaScript.
Tạo một server action mới, addComment. Hàm mới này sẽ yêu cầu một tham số duy nhất thuộc loại FormData, đây là một ví dụ:
// /services/actions/comment
'use server'
export async function addComment(formData) {
const articleId = formData.get('articleId');
const comment = formData.get('comment');
const response = await fetch(`https://api.example.com/articles/${articleId}/comments`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ comment }),
});
const result = await response.json();
return result;
}Đó là tất cả những gì bạn cần làm để tạo server action. Gọi hàm này khi người dùng gửi biểu mẫu.
Hãy tạo một thành phần mới sẽ hiển thị biểu mẫu “Add Comment”:
import { addComment } from '@/services/actions/comment'
export default async function ArticleComment(props) {
return (
<form action={addComment}>
<input type="text" name="articleId" value={props.articleId} />
<input type="text" name="comment" />
<button type="submit">Add Comment</button>
</form>
)
}Đến ! Bạn có server đầy đủ chức năng được kích hoạt từ việc gửi form, nhưng nếu bạn dùng thử, bạn sẽ nhận thấy rằng nó có vẻ không phản hồi, nghĩa là người dùng không biết rằng có điều gì đó đang xảy ra vì không có thao tác “tải” hoặc “lưu” ” hoạt động được hiển thị.
Chúng ta sẽ tiếp tục ở phần 2 trong series này, cảm ơn mọi người đã xem!
