Làm quen với Next.js cho người mới bắt đầu (P3)

Phần 3 của Làm quen với Next.js cho người mới bắt đầu sẽ giới thiệu về getStaticPaths và tạo đường dẫn theo yêu cầu.

getStaticPaths:

Nếu một trang có định tuyến động và sử dụng getStaticProps, nó cần xác định danh sách các đường dẫn sẽ được tạo tĩnh. Khi bạn sử dụng chức năng getStaticPaths(Tạo trang web tĩnh) từ một trang động thì Next.js sẽ hiển thị trước tất cả các đường dẫn được chỉ định bởi tĩnh getStaticPaths.

    export async function getStaticPaths() {
      return {
        paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
        fallback: false, // can also be true or 'blocking'
      }
    }
    export async function getStaticProps(context) {
      return {
        props: { post: {} },
      }
    }
    export default function Post({ post }) {
    }
Chúng ta nên sử dụng getStaticPaths trong trường hợp: sử dụng getStaticPathsnếu bạn đang hiển thị trước các trang tĩnh sử dụng các tuyến động và getStaticPaths phải được sử dụng với getStaticProps.

Khi nào getStaticPaths chạy?: getStaticPathssẽ chỉ chạy trong quá trình xây dựng, nó sẽ không được gọi trong thời gian chạy.

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. Bởi vì, việc tạo nhiều trang hơn trong quá trình xây dựng sẽ gây ra sự chậm trễ.

Ngoài ra, 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ảng trống cho path. Ví dụ, bạn có thể xây dựng nhanh các trang bằng cách tạo tất cả các trang theo yêu cầu để xem trước:

    export async function getStaticPaths() {

      if (process.env.SKIP_BUILD_STATIC_GENERATION) {
        return {
          paths: [],
          fallback: 'blocking',
        }
      }

      const posts = await res.json()

        params: { id: post.id },
      }))

      return { paths, fallback: false }
    }
Xem lại phần trước tại: Làm quen với Next.js cho người mới bắt đầu (P2)
Nguồn: Next.js

Công nghệ được nhắc đến trong bài viết này

Tên Công NghệPhiên BảnPhát Hành
Next.js---
2 phút đọc·376 lượt xem·