Giới thiệu
SWR là một thư viện React Hooks dùng cho việc fetch dữ liệu.
Tên “SWR” xuất phát từ stale-while-revalidate, một chiến lược vô hiệu hóa cache phổ biến được HTTP RFC 5861 phổ biến. SWR trả về dữ liệu từ bộ nhớ cache trước (stale), sau đó gửi yêu cầu (revalidate), và cuối cùng đi kèm với dữ liệu đã cập nhật.
Chỉ với một hook, bạn có thể đơn giản hóa logic fetch dữ liệu trong dự án của mình đáng kể. Và nó cũng bao gồm tất cả các khía cạnh về tốc độ, độ chính xác và ổn định để giúp bạn xây dựng trải nghiệm tốt hơn:
- Nhanh , nhẹ và có thể sử dụng lại để fetch dữ liệu
- Không ràng buộc với giao thức và phương tiện truyền dẫn cụ thể
- Sẵn có bộ nhớ cache và loại bỏ yêu cầu trùng lặp
- Trải nghiệm thời gian thực
- Revalidation khi focus
- Revalidation khi mạng khôi phục
- Đánh giá thường xuyên (Polling)
- Phân trang và khôi phục vị trí cuộn
- SSR và SSG
- Đột biến cục bộ (Giao diện lạc quan)
- Sẵn có khả năng thử lại lỗi thông minh
- TypeScript
- React Suspense
- React Native
…và còn nhiều hơn nữa.
Với SWR, các thành phần sẽ liên tục và tự động nhận dòng cập nhật dữ liệu. Do đó, giao diện người dùng luôn luôn nhanh và phản ứng.
Xem toàn bộ tài liệu và ví dụ tại swr.vercel.app .
Bắt đầu nhanh
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
Trong ví dụ này, React Hook useSWR nhận vào một key và một hàm fetcher. key là một định danh duy nhất của yêu cầu, thường là URL của API. Và fetcher nhận key làm tham số và trả về dữ liệu một cách bất đồng bộ.
useSWR cũng trả về 2 giá trị: data và error. Khi yêu cầu (fetcher) chưa hoàn thành, data sẽ là undefined. Và khi chúng ta nhận được phản hồi, nó sẽ thiết lập data và error dựa trên kết quả của fetcher và làm mới lại thành phần.
Lưu ý rằng fetcher có thể là bất kỳ hàm bất đồng bộ nào, bạn có thể sử dụng thư viện fetch dữ liệu yêu thích của mình để xử lý phần đó.
Xem toàn bộ tài liệu và ví dụ tại swr.vercel.app .
Tác giả
Thư viện này được tạo ra bởi đội ngũ đứng sau Next.js, với sự đóng góp từ cộng đồng của chúng tôi:
- Shu Ding (@shuding_) – Vercel
- Guillermo Rauch (@rauchg) – Vercel
- Joe Haddad (@timer150) – Vercel
- Paco Coursey (@pacocoursey) – Vercel
Cảm ơn Ryan Chen đã cung cấp tên gói npm tuyệt vời swr!
Chi tiết tải về:
Tác giả: vercel
Nguồn: https://github.com/vercel/swr
Giấy phép: MIT license
