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

Tiếp nối với phần trước, sau khi tìm hiểu về pages và kết xuất thì ta đến với tìm nạp dữ liệu trong Next.js.

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 bạn yêu cầu trực tiếp trang này, sẽ `getServerSideProps`chạy theo thời gian yêu cầu và trang này sẽ được hiển thị trước.
  • Khi bạn yêu cầu trang này khi chuyển đổi trang phía máy khách qua `next/link`hoặc `next/router` thì Next.js sẽ gửi một yêu cầu API đến máy chủ, máy chủ sẽ chạy `getServerSideProps`.
  • 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 biệt với getServerSideProps khi có lỗi được đưa vào thì nó sẽ hiển thị pages/500.js.

    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ụ:

  • Đầu tiên là sẽ hiển thị trang không có dữ liệu. Các phần của trang có thể được hiển thị trước bằng Tạo tĩnh.
  • Sau đó, tìm nạp dữ liệu ở phía máy khách và hiển thị nó khi sẵn sàng.
  • 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: {},
          }
        }
    
    Xem lại phần trước: Làm quen với Next.js cho người mới bắt đầu 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---
    3 phút đọc·893 lượt xem·