😍generateStaticParams, các hằng số dynamicParams, dynamic, revalidate (ok)

https://nextjs.org/docs/app/api-reference/functions/generate-static-params

Chức năng này generateStaticParamscó thể được sử dụng kết hợp với các phân đoạn tuyến động để tạo tuyến tĩnh tại thời điểm xây dựng thay vì theo yêu cầu tại thời điểm yêu cầu.

app/blog/[slug]/page.tsx

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // ...
}

1. Bạn có thể sử dụng dynamicParams tùy chọn cấu hình phân đoạn để kiểm soát những gì xảy ra khi truy cập vào một phân đoạn động không được tạo bằng generateStaticParams.

dynamicParams

layout.tsx | page.tsx

export const dynamicParams = true // true | false,

• true(mặc định): Các phân đoạn động không được bao gồm generateStaticParamssẽ được tạo theo yêu cầu.

• false: Các phân đoạn động không được bao gồm generateStaticParamssẽ trả về lỗi 404.

1. Bạn phải trả về một mảng trống từgenerateStaticParams hoặc sử dụng export const dynamic = 'force-static'để xác thực lại đường dẫn (ISR) khi chạy .

dynamic

Thay đổi hành vi động của bố cục hoặc trang thành hoàn toàn tĩnh hoặc hoàn toàn động.

layout.tsx | page.tsx | route.ts

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

• 'auto'(mặc định): Tùy chọn mặc định để lưu trữ đệm càng nhiều càng tốt mà không ngăn cản bất kỳ thành phần nào chuyển sang hành vi động.

• 'force-dynamic': Buộc kết xuất động , điều này sẽ dẫn đến việc các tuyến đường được kết xuất cho mỗi người dùng tại thời điểm yêu cầu. Tùy chọn này tương đương với:

— getServerSideProps()trong pages thư mục.

— Đặt tùy chọn cho mọi fetch() yêu cầu trong bố cục hoặc trang thành { cache: 'no-store', next: { revalidate: 0 } }.

— Thiết lập cấu hình phân đoạn thànhexport const fetchCache = 'force-no-store'

• 'error': Buộc kết xuất tĩnh và lưu trữ dữ liệu của bố cục hoặc trang bằng cách gây ra lỗi nếu bất kỳ thành phần nào sử dụng API động hoặc dữ liệu không được lưu trữ. Tùy chọn này tương đương với:

— getStaticProps() trong pages thư mục.

— Đặt tùy chọn cho mọi fetch()yêu cầu trong bố cục hoặc trang thành { cache: 'force-cache' }.

— Đặt cấu hình phân đoạn thành fetchCache = 'only-cache', dynamicParams = false.

— dynamic = 'error'thay đổi mặc định dynamicParamstừ truethành false.

Bạn có thể chọn quay lại hiển thị trang động cho các tham số động không được tạo bởi bằng generateStaticParamscách thiết lập thủ công dynamicParams = true.

force-static': Buộc hiển thị tĩnh và lưu trữ dữ liệu của bố cục hoặc trang bằng cách buộc cookiesvà trả về giá trị trống.headers()useSearchParams()

revalidate

Đặt thời gian xác thực lại mặc định cho bố cục hoặc trang. Tùy chọn này không ghi đè revalidategiá trị được đặt bởi từng fetchyêu cầu.

layout.tsx | page.tsx | route.ts

export const revalidate = false
// false | 0 | number

• false(mặc định): Phương pháp tìm kiếm mặc định để lưu trữ đệm bất kỳ fetchyêu cầu nào đặt cachetùy chọn của chúng thành 'force-cache'hoặc được phát hiện trước khi API động được sử dụng. Về mặt ngữ nghĩa tương đương với revalidate: Infinityđiều đó có nghĩa là tài nguyên sẽ được lưu trữ đệm vô thời hạn. Vẫn có thể fetchsử dụng cache: 'no-store'hoặc revalidate: 0tránh lưu trữ đệm cho từng yêu cầu và khiến tuyến đường được hiển thị động. Hoặc đặt revalidatethành số dương thấp hơn mặc định của tuyến đường để tăng tần suất xác thực lại của tuyến đường.

• 0: Đảm bảo bố cục hoặc trang luôn được hiển thị động ngay cả khi không có API động hoặc dữ liệu chưa được lưu trong bộ nhớ đệm nào được phát hiện. Tùy chọn này thay đổi mặc định của fetchcác yêu cầu không đặt cachetùy chọn thành 'no-store'nhưng để nguyên fetchcác yêu cầu chọn tham gia 'force-cache'hoặc sử dụng tích cực revalidate.

• number: (tính bằng giây) Đặt tần suất xác thực lại mặc định của bố cục hoặc trang thành ngiây.