❓Khi nào tôi nên sử dụng getStaticPaths?

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths

Bạn nên sử dụng getStaticPathsnếu bạn đang dựng trước các trang tĩnh sử dụng các tuyến động và:

• Dữ liệu đến từ một CMS không có giao diện

• Dữ liệu đến từ một cơ sở dữ liệu

• Dữ liệu đến từ hệ thống tập tin

• Dữ liệu có thể được lưu trữ công khai (không dành riêng cho người dùng)

• Trang phải được hiển thị trước (cho SEO) và phải rất nhanh — getStaticPropstạo HTMLvà JSONtệp, cả hai đều có thể được lưu vào bộ nhớ đệm bởi CDN để tăng hiệu suất

getStaticProps chạy như thế nào liên quan đến getStaticPaths

• getStaticProps chạy trong khi next build bất kỳ pathstrả về trong quá trình xây dựng

• getStaticProps chạy ở chế độ nền khi sử dụng fallback: true

• getStaticProps được gọi trước khi render ban đầu khi sử dụng fallback: blocking

Tôi có thể sử dụng getStaticPaths ở đâu?

• getStaticPaths phải được sử dụng với getStaticProps

• Bạn không thể sử dụng getStaticPaths vớigetServerSideProps

• Bạn có thể xuất getStaticPaths từ ​​một Tuyến động cũng sử dụnggetStaticProps

• Bạn không thể xuất getStaticPathstừ ​​tệp không phải trang (ví dụ: componentsthư mục của bạn)

• Bạn phải xuất getStaticPathsdưới dạng một hàm độc lập chứ không phải là một thuộc tính của thành phần trang

Chạy trên mọi yêu cầu trong quá trình phát triển

Trong quá trình phát triển ( next dev), getStaticPathssẽ được gọi trong mọi yêu cầu.

Tạo đường dẫn theo yêu cầu

getStaticPathscho phép bạn kiểm soát những trang nào được tạo trong quá trình xây dựng thay vì theo yêu cầu với fallback. Tạo nhiều trang hơn trong quá trình xây dựng sẽ khiến quá trình xây dựng chậm hơn.

Bạn có thể trì hoãn việc tạo tất cả các trang theo yêu cầu bằng cách trả về một mảng trống cho paths.

pages/posts/[id].js

export async function getStaticPaths() {
  // When this is true (in preview environments) don't
  // prerender any static pages
  // (faster builds, but slower initial page load)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  // Get the paths we want to prerender based on posts
  // In production environments, prerender all pages
  // (slower builds, but faster initial page load)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
  // { fallback: false } means other routes should 404
  return { paths, fallback: false }
}