🫢Từ khóa use server, use client là gì

https://react.dev/reference/rsc/use-server

Chỉ thị này use serverchỉ định một hàm hoặc tệp sẽ được thực thi ở phía máy chủ . Nó có thể được sử dụng ở đầu tệp để chỉ ra rằng tất cả các hàm trong tệp đều ở phía máy chủ hoặc nội tuyến ở đầu hàm để đánh dấu hàm là Hàm máy chủ. Đây là một tính năng của React.

1 . Sử dụng use serverở đầu tệp

Ví dụ sau đây cho thấy một tệp có use serverchỉ thị ở đầu. Tất cả các hàm trong tệp được thực thi trên máy chủ.

'use server'
import { db } from '@/lib/db' // Your database client
export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data })
  return user
}

2. Sử dụng các hàm máy chủ trong thành phần máy khách

Để sử dụng Server Functions trong Client Components, bạn cần tạo Server Functions trong một tệp chuyên dụng bằng cách sử dụng use serverchỉ thị ở đầu tệp. Sau đó, các Server Functions này có thể được nhập vào Client và Server Components và được thực thi.

Giả sử bạn có hàm máy chủ fetchUsers trong actions.ts:

'use server'
import { db } from '@/lib/db' // Your database client
 
export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

Sau đó, bạn có thể nhập Hàm Máy chủ fetchUsers vào Thành phần Máy khách và thực thi nó ở phía máy khách.

'use client'
import { fetchUsers } from '../actions'
 
export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

Sử dụng use server inline Trong ví dụ sau, use server được sử dụng inline ở đầu một hàm để đánh dấu nó là một Hàm máy chủ:

import { db } from '@/lib/db' // Your database client
 
export default function UserList() {
  async function fetchUsers() {
    'use server'
    const users = await db.user.findMany()
    return users
  }
 
  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

Các cân nhắc về bảo mật Khi sử dụng chỉ thị use server, điều quan trọng là phải đảm bảo rằng mọi logic phía máy chủ đều an toàn và dữ liệu nhạy cảm vẫn được bảo vệ.

Xác thực và ủy quyền Luôn xác thực và ủy quyền cho người dùng trước khi thực hiện các hoạt động nhạy cảm phía máy chủ.

'use server'
 
import { db } from '@/lib/db' // Your database client
import { authenticate } from '@/lib/auth' // Your authentication library
 
export async function createUser(
  data: { name: string; email: string },
  token: string
) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('Unauthorized')
  }
  const newUser = await db.user.create({ data })
  return newUser
}