GoonGiới thiệu về NextJS và Fetch Data
NextJS là một framework phổ biến để xây dựng các ứng dụng web hiện đại dựa trên React với hiệu suất và khả năng SEO tuyệt vời. Trong bài viết này, chúng ta sẽ tìm hiểu các khái niệm chính về việc lấy dữ liệu thông qua client-side (bên client) và server-side (bên server) trong Next.js.
Hiểu về Lấy Dữ Liệu
Lấy dữ liệu là cách chúng ta nhận dữ liệu mà ứng dụng của chúng ta phụ thuộc, từ APIs, cơ sở dữ liệu hoặc các dịch vụ khác. Trong NextJS, chúng ta có hai cách để lấy dữ liệu: client-side fetching và server-side fetching.
Client-Side Fetching
Client-side fetching có nghĩa là trình duyệt lấy dữ liệu sau khi trang tải xong. Cách tiếp cận này có thể dẫn đến việc hiển thị nội dung bị chậm, gây ra trải nghiệm người dùng kém, đặc biệt là trên các kết nối chậm. Ngoài ra, client-side fetching cũng có thể gây ra vấn đề về SEO, vì các công cụ tìm kiếm có thể bò lướt trang trước khi dữ liệu được lấy.
Server-Side Fetching
Mặt khác, server-side fetching có nghĩa là máy chủ lấy dữ liệu trước khi gửi HTML đến trình duyệt. Cách tiếp cận này có thể cung cấp trải nghiệm người dùng nhanh hơn, vì dữ liệu đã sẵn sàng khi trang tải. Server-side fetching cũng an toàn hơn, vì các thông tin xác thực API và các hoạt động nhạy cảm được ẩn khỏi người dùng.
Thực hiện Server-Side Fetching trong NextJS
Để thực hiện server-side fetching trong NextJS, chúng ta có thể sử dụng hàm getServerSideProps. Hàm này cho phép chúng ta lấy dữ liệu trên máy chủ và chuyển nó dưới dạng props cho component trang.
Ví dụ Sử Dụng
Hãy xem xét một ví dụ trong đó chúng ta muốn lấy danh sách người dùng từ một API và hiển thị nó trên trang. Chúng ta có thể sử dụng hàm getServerSideProps để lấy dữ liệu trên máy chủ và chuyển nó dưới dạng props cho component trang.
[](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=1s)
[*Ví dụ về Server-Side Fetching*](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=1s)
Khi nào nên sử dụng Client-Side Fetching
Mặc dù server-side fetching được ưa chuộng hơn, vẫn có các trường hợp mà client-side fetching phù hợp hơn. Ví dụ, khi triển khai các tính năng như lazy loading hoặc cập nhật thời gian thực, client-side fetching có thể hiệu quả hơn.
Kết luận
Tóm lại, việc lấy dữ liệu là một khía cạnh quan trọng của việc xây dựng các ứng dụng web hiện đại. NextJS cung cấp hai cách để lấy dữ liệu: client-side fetching và server-side fetching. Mặc dù server-side fetching thường được ưa chuộng, client-side fetching cũng có những trường hợp sử dụng riêng. Bằng cách hiểu sự khác biệt giữa hai cách tiếp cận này, các nhà phát triển có thể đưa ra quyết định thông minh về cách lấy dữ liệu trong ứng dụng NextJS của họ.
[](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=39s)
[*Ví dụ về Client-Side Fetching*](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=39s)
[](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=85s)
[*Ví dụ về Server-Side Fetching*](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=85s)
[](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=140s)
[*Ví dụ về Lấy Dữ Liệu*](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=140s)
[](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=360s)
[*Ví dụ về NextJSProductId*](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=360s)
[](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=442s)
[*Chuyên Môn về Lấy Dữ Liệu*](https://www.youtube.com/watch?v=Umdjl5QD3Dc&t=442s)