Cách dùng server action trong Next.js

Việc giảm tải công việc từ client sang server của bạn thật dễ dàng với các server action của Next.js. Dưới đây là mọi điều bạn cần biết về server action trong Next.js.

Server Action là gì?

Server Action hay các hành động của máy chủ cho phép bạn viết chức năng phía máy chủ một lần ngay bên cạnh các thành phần máy chủ của bạn. Điều này rất quan trọng vì bạn không còn cần phải viết các tuyến API khi gửi biểu mẫu hoặc thực hiện bất kỳ loại thay đổi dữ liệu nào khác, bao gồm cả thay đổi dữ liệu GraphQL.

Bạn có thể viết chức năng chạy trên server và sau đó gọi chúng từ các thành phần máy khách hoặc máy chủ. Đây là một tính năng alpha trong Next.js 13.4, được xây dựng dựa trên React Actions. Sử dụng server action dẫn đến giảm JavaScript phía máy khách và có thể giúp bạn tạo dần dần biểu mẫu nâng cao.

Ví dụ về server action

Với server action, bạn có thể thực hiện các thay đổi bên trong Next.js, trên máy chủ. Hãy xem xét tính năng mới này bằng một ví dụ về trang được tạo bằng Next.js hiển thị biểu mẫu cho phép bạn tạo bài đăng.

Đây là các import:

import Link from "next/link"
import FormGroup from "@/components/FormGroup"
import { revalidateTag } from "next/cache"
import { redirect } from "next/navigation"

Giờ với code tạo bài viết. Hàm này là một server action. Nó chạy trên máy chủ và gửi tiêu đề và nội dung bài đăng tới API (tạo bài đăng trong cơ sở dữ liệu):

async function createPost(data) {
  "use server"
  const title = data.get("title")
  const body = data.get("body")

  await fetch("http://127.0.0.1/posts", {
    header: {"Content-Type": "application/json"},
    method: POST,
    body: JSON.stringify({title, body})
  })

  revalidateTag("posts")
  redirect("/")
}

Hàm này lấy tiêu đề và nội dung bài đăng, sau đó gửi đến điểm cuối /posts thông qua yêu cầu POST. Sau đó, nó buộc bộ đệm làm mới nội dung được liên kết với thẻ "bài đăng" và chuyển hướng trở lại trang chủ.

Đây là biểu mẫu thu thập tiêu đề & nội dung bài viết mới:

export default NewPostForm() {
  return (
    <form action={createPost}>
      <div>
        <FormGroup>
          <label htmlFor="title">Title</label>
          <input type="text" name="title" id="title" />
        </FormGroup>
      </div>

      <div>
        <FormGroup>
          <label htmlFor="title">Body</label>
          <textarea type="text" name="body" id="body"> <textarea/>
        </FormGroup>
      </div>

      <div>
        <button> Save </button>
      </div>
    </form>
  )
}

Bạn có thể thấy rằng biểu mẫu không chứa logic liên quan đến việc tạo bài đăng, chỉ là một hành động biểu mẫu: hàm createPost(). Nhớ lại rằng hàm createPost có chỉ thị "sử dụng máy chủ" tuyên bố rằng mọi thứ trong hàm đó sẽ chạy trên máy chủ.

Tất cả code đang chạy trên server và client của bạn không biết gì về nó. Điều này là do biểu mẫu là một thành phần máy chủ và không có gì được hiển thị động trên máy khách.

Khinhấp vào nút Save, Next.js sẽ gọi hàm createPost(). Thao tác này gửi tiêu đề và nội dung dưới dạng dữ liệu biểu mẫu. Nó sẽ được đăng lên API cục bộ để lưu thông tin.

Xác thực lại bài đăng

Ở phía dưới cùng của hàm createPost() là dòng code sau:

revalidateTags("posts")

Để hiểu ý nghĩa của hàm, hãy tưởng tượng rằng bạn có một trang bài đăng. Bên trong thành phần bài đăng, bạn sẽ gọi một hàm có tên getPosts() để lấy tất cả các bài đăng từ cơ sở dữ liệu và hiển thị chúng cho người dùng xem:

export default async function Posts(){
  const posts = await getPosts()

  return (
    <div>
      {posts.map(post => {
        <PostCard key={post.id} {...post} />
      })}
    </div>
  )
}

Hàm getPosts() trông như sau:

async function getPosts() {
  const res = await fetch("https://127.0.0.1/posts?sort=title", {
    next: {tags: ["posts"], revalidate: 3600 }
  })

  return res.json()
}

Hàm này chuyển tùy chọn next để tìm nạp, cho phép bạn đặt khoảng thời gian xác thực lại. Theo mặc định, mọi yêu cầu tìm nạp đơn lẻ mà bạn thực hiện bên trong thành phần máy chủ sẽ được lưu vào bộ nhớ đệm vĩnh viễn. Theo dõi bộ đệm và làm mới nó khi cần thiết là một phần quan trọng của quá trình tìm nạp dữ liệu trong Next.js.

Đoạn mã trên yêu cầu Next.js lưu trữ dữ liệu post trong tối đa một giờ (3.600 giây). Sau một giờ, dữ liệu đó trở nên cũ và Next.js "refresh" lại nó để lấy dữ liệu mới nhất từ cơ sở dữ liệu.

Hãy nhớ rằng hàm createPost() gọi revalidateTag("posts") sau khi nó hoàn thành phần công việc còn lại. Điều này buộc Next.js phải tìm nạp lại dữ liệu bao gồm bài đăng mới mà ứng dụng vừa tạo.

Để chắc chắn toàn bộ code đang chạy trên server, bạn có thể thêm lệnh log console sau trong hàm createPost():

console.log("Running on the server")

Sau đó, hãy thử tạo một bài đăng mới bằng cách nhấp vào nút gửi. Nếu code của bạn đang chạy trên máy chủ, thông báo log đó sẽ hiển thị trên thiết bị đầu cuối của bạn. Nhưng nếu nó đang chạy trên máy khách thì nhật ký sẽ hiển thị trong bảng điều khiển của trình duyệt.

Trên đây là cách dùng server actions trong Next.JS. Hi vọng bài viết hữu ích với các bạn.