Dynamic APIs, cấu hình Route Segment, generateStaticParams, và React cache trong Next.js:

Dưới đây là phần giải thích chi tiết bằng tiếng Việt về nội dung bạn đưa ra liên quan đến Dynamic APIs, cấu hình Route Segment, generateStaticParams, và React cache trong Next.js:

✅ Dynamic APIs (API động)

Các API như cookies, headers, hoặc searchParams phụ thuộc vào thông tin từ request đến lúc runtime. Khi bạn sử dụng các API này trong một route, route đó sẽ không được cache toàn phần (Full Route Cache) nữa, và sẽ được render động (dynamically rendered).

🍪 Cookies API

• Khi bạn sử dụng cookies.set() hoặc cookies.delete() trong Server Actions, Next.js sẽ xóa cache của router để đảm bảo dữ liệu không bị lỗi thời (ví dụ: sau khi đăng nhập hoặc đăng xuất).

• Điều này giúp cập nhật giao diện hoặc dữ liệu phản ánh đúng trạng thái hiện tại (như authentication).

⚙️ Segment Config Options (Tùy chọn cấu hình phân đoạn route)

Bạn có thể sử dụng các cấu hình sau để điều chỉnh hành vi cache:

1. export const dynamic = 'force-dynamic'
   → Bắt buộc route phải được render động, không cache kết quả fetch.

2. export const fetchCache = 'default-no-store'
   → Tất cả các lệnh fetch trong route này sẽ không lưu cache.

✅ Sử dụng khi bạn không thể kiểm soát cache qua fetch API (ví dụ dùng client database, CMS...).

🧩 generateStaticParams (Dùng trong dynamic segments như [slug])

Mục đích:

Giúp Next.js biết trước các đường dẫn động để có thể build trước (static generation).

1. Render toàn bộ tại build time:

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  return posts.map((post) => ({ slug: post.slug }))
}

→ Tất cả các slug được build sẵn, không cần render tại runtime.

2. Render một phần tại build time, phần còn lại khi truy cập:

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  return posts.slice(0, 10).map((post) => ({ slug: post.slug }))
}

→ 10 bài viết đầu được render sẵn, các bài khác render lần đầu khi truy cập.

3. Render tất cả lần đầu khi truy cập (không render sẵn):

export async function generateStaticParams() {
  return []
}
export const dynamic = 'force-static'

→ Không có gì được build trước, nhưng sẽ được cache sau lần truy cập đầu tiên.

❌ Tắt dynamic params để chỉ cho phép truy cập các path đã build sẵn:

export const dynamicParams = false

→ Chỉ những path có trong generateStaticParams mới được truy cập, các path khác sẽ 404.

💾 React cache function

• Hàm cache() từ React cho phép memo hóa (nhớ lại giá trị return) của một hàm async.

• Thích hợp khi bạn không dùng fetch mà dùng database client, CMS, GraphQL...

Ví dụ:

import { cache } from 'react'
import db from '@/lib/db'

export const getItem = cache(async (id: string) => {
  const item = await db.item.findUnique({ id })
  return item
})

→ Lần đầu gọi sẽ truy vấn DB, lần sau cùng tham số id thì dùng lại kết quả đã cache.

Bạn muốn mình minh họa thêm ví dụ thực tế cho phần nào không?