Tìm hiểu về tính năng cache data với NextJS

– Tìm nạp dữ liệu trong NextJS 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 vào
trường hợp sử dụng ứng dụng của bạn.

  • getStaticProps: Tìm nạp dữ liệu và tạo các trang tĩnh
  • getStaticPaths:Tìm nạp dữ liệu và tạo các trang tĩnh từ một trang tạo các tuyến động thường đi cùng với getStaticProps. Mục đích chính là chuẩn bị trước Dynamic routes trước khi render.
  • getServerSideProps: Tìm nạp dữ liệu theo từng yêu cầu

1. getStaticProps

– Nếu bạn export một function với tên getStaticProps (Static Site Generation) từ một trang. NextJS sẽ kết
xuất trước trang này tại thời điểm xây dựng bằng cách sử dụng các props được getStaticProps trả về.

Khi nào nên sử dụng getStaticProps?

– Bạn nên sử dụng getStaticProps nếu:
+ Dữ liệu cần thiết để hiển thị trang có sẵn tại thời điểm xây dựng trước yêu cầu của người dùng.
+ Dữ liệu đến từ một CMS không đầu
+ Trang phải được hiển thị trước (để SEO) và phải rất nhanh – getStaticProps tạo các tệp HTML và JSON, cả hai đều có thể được CDN lưu vào bộ nhớ đệm để tăng hiệu suất.
+ Dữ liệu có thể được lưu trữ công khai (Không dành riêng cho user). Tình trạng này có thể được bỏ
qua trong một số trường hợp cụ thể bằng cách sử dụng Middleware để viết lại đường dẫn

Bạn có thể sử dụng getStaticProps ở đâu?

getStaticProps chỉ có thể được export từ một trang. Bạn không thể export nó từ các tệp không phải trang, _app,         _document hoặc _error.
– Ngoài ra, bạn phải export getStaticProps như một hàm độc lập.
– nó sẽ không hoạt động nếu bạn thêm getStaticProps làm thuộc tính của thành phần trang.

Chú ý: getStaticProps không tự động xóa các tệp HTMLJSON trước đó. Vì vậy, nó sẽ cứ tiếp tục nạp vào các dữ liệu mới dẫn đến tràn bộ nhớ Pod từ Server. Giải pháp cho vấn đề này là bạn có thể tham khảo với getServerSideProps.

2. getStaticPaths

– Nếu một trang có Dynamic Routes và sử dụng getStaticProps, thì trang đó cần xác định danh sách các đường dẫn sẽ được tạo tĩnh.
– Khi bạn xuất một hàm có tên getStaticPaths (tạo trang tĩnh) từ một trang sử dụng các tuyến động, NextJS sẽ kết xuất trước một cách tĩnh tất cả các đường dẫn được chỉ định bởi getStaticPaths.

Khi nào nên sử dụng getStaticProps?

– Bạn nên sử dụng getStaticPaths nếu bạn đang hiển thị 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 đầu.
+ Dữ liệu đến từ Database.
+ 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 user).
+ Trang phải được hiển thị trước (để SEO) và phải rất nhanh – getStaticProps tạo các tệp HTML và JSON, cả hai đều có thể được CDN lưu vào bộ nhớ đệm để tăng hiệu suất.

getStaticProps chạy như thế nào đối với getStaticPaths?

+ getStaticProps chạy trong quá trình build tiếp theo đối với mọi đường dẫn được trả về trong quá trình build
+ getStaticProps chạy ở chế độ nền khi sử dụng fallback: true
+ getStaticProps được gọi trước render ban đầu khi sử dụng fallback: blocking

Có thể sử dụng getStaticPaths ở đâu?

+ getStaticPaths phải được sử dụng với getStaticProps
+ Không thể sử dụng getStaticPaths với getServerSideProps
+ Có thể export getStaticPaths từ Dynamic Routes cũng sử dụng getStaticProps
+ Không thể export getStaticPaths từ tệp không phải trang (Ví dụ: thư mục components)
+ Phải export getStaticPaths dưới dạng hàm độc lập chứ không phải thuộc tính của thành phần trang.

3. getServerSideProps

getServerSideProps là một function NextJS có thể được sử dụng để tìm najp dữ liệu và hiển thị nội dung của trang tại thời điểm được yêu cầu.

Khi nào nên sử dụng getServerSideProps?

– Bạn nên sử dụng getServerSideProps nếu bạn cần hiển thị một trang dựa trên dữ liệu người dùng được cá nhân hóa hoặc thông tin chỉ có thể được biết tại thời điểm yêu cầu.
– Nếu bạn không cần nạp dữ liệu tại thời điểm yêu cầu hoặc muốn lưu dữ liệu vào bộ nhớ đệm và HTML được pre-rendered, khuyên bạn nên sử dụng getStaticProps.