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

Tìm nạp dữ liệu trong Next.js cho phép bạn hiển thị nội dung của mình theo nhiều cách khác nhau, tùy thuộc vào từng trường hợp. Chúng bao gồm kết xuất trước với Kết xuất phía máy chủ hoặc Tạo tĩnh và cập nhật hoặc tạo nội dung trong thời gian chạy với Kết xuất tĩnh tăng dần .

getServerSideProps:

Nếu bạn sử dụng chức năng được gọi là getServerSideProps từ một trang web thì Next.js sẽ hiển thị trước trang này theo từng yêu cầu bằng cách sử dụng dữ liệu được trả về bởi getServerSideProps.
Khi nào getServerSideProps chạy:getServerSidePropschỉ chạy trên phía máy chủ và không bao giờ chạy trên trình duyệt. Nếu một trang sử dụng getServerSideProps thì:

Khi nào chúng ta nên sử dụng getServerSideProps: Bạn chỉ nên sử dụng getServerSidePropsnếu bạn cần hiển thị trang có dữ liệu phải được tìm nạp tại thời điểm yêu cầu. Ví dụ: cách tìm nạp dữ liệu tại thời điểm yêu cầu và hiển thị trước kết quả.

    function Page({ data }) {
      // đọc đữ kiệu
    }
    export async function getServerSideProps() {
      const res = await fetch(`https://.../data`)
      const data = await res.json()

      return { props: { data } }
    }

    export default Page

Tìm nạp dữ liệu từ phía máy khách:

Nếu trang của bạn chứa dữ liệu cập nhật thường xuyên và bạn không cần kết xuất trước dữ liệu, bạn có thể tìm nạp dữ liệu ở phía máy khách. Ví dụ:

Lưu vào bộ nhớ đệm với kết xuất phía máy chủ SSR

Bạn có thể sử dụng bộ nhớ đệm bằng cách sử dụng ( Cache-Control) bên trong getServerSidePropsđể lưu các phản hồi động vào bộ nhớ cache. Ví dụ, sử dụng stale-while-revalidate.

    export async function getServerSideProps({ req, res }) {
      res.setHeader(
        'Cache-Control',
        'public, s-maxage=10, stale-while-revalidate=59'
      )

      return {
        props: {},
      }
    }