TopDev
#ReactJS

Ứng dụng thư viện SWR vào việc kết nối API trong ReactJs

minhdev 📖 4 phút đọc

Sử dụng thư viện SWR để kết nối API trong ứng dụng web sử dụng ReactJS giúp cải thiện hiệu suất, quản lý dữ liệu, và tối ưu hóa trải nghiệm người dùng. SWR (Stale-While-Revalidate) là một thư viện React hook để fetch dữ liệu với khả năng lưu trữ tạm thời (caching), revalidation, và tối ưu hoá hiệu suất, rất phù hợp khi xử lý các API.

Các bước áp dụng SWR trong ReactJS:#

1. Cài đặt SWR

Cài đặt SWR thông qua npm hoặc yarn:

` npm install swr

hoặc

yarn add swr `

2. Cách sử dụng cơ bản

Khi sử dụng SWR, bạn cần cung cấp một key (URL API hoặc unique identifier) và một hàm fetch dữ liệu.

Ví dụ: ` import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() { const { data, error, isLoading } = useSWR('/api/data', fetcher);

if (isLoading) return

Loading...
; if (error) return
Error loading data
;

return (

Data:

{JSON.stringify(data, null, 2)}
); }

export default App; `

3. Các tính năng nổi bật của SWR

  • Tự động refetch (Revalidation): SWR tự động refetch dữ liệu sau mỗi khoảng thời gian xác định hoặc khi tab trình duyệt được focus.

    • Điều này giúp dữ liệu luôn mới mà không cần thao tác thủ công.

const { data } = useSWR('/api/data', fetcher, { refreshInterval: 5000 }); // 5 giây refetch một lần

  • Fallback Data: Cung cấp dữ liệu ban đầu trong khi chờ dữ liệu thực được tải từ API, giúp cải thiện UX. const { data } = useSWR('/api/data', fetcher, { fallbackData: { name: 'Default User' }, });

  • Xử lý mutation: SWR cung cấp phương thức mutate để thay đổi hoặc cập nhật dữ liệu cục bộ mà không cần chờ API phản hồi. ` import { mutate } from 'swr';

    const updateData = async () => { await mutate('/api/data', { name: 'Updated User' }, false); // Cập nhật cục bộ ngay await fetch('/api/update', { method: 'POST' }); await mutate('/api/data'); // Tải lại từ API sau cập nhật }; `

  • Xử lý lỗi tự động: SWR hỗ trợ truyền hàm onError để log lỗi hoặc thực hiện các hành động khác khi gặp vấn đề. const { data, error } = useSWR('/api/data', fetcher, { onError: (err) => console.error('Error:', err), });

4. SWR kết hợp với Axios

SWR có thể được sử dụng với bất kỳ thư viện HTTP nào, bao gồm Axios.

` import useSWR from 'swr'; import axios from 'axios';

const fetcher = (url) => axios.get(url).then((res) => res.data);

function App() { const { data, error } = useSWR('/api/data', fetcher);

if (error) return

Error loading data
; if (!data) return
Loading...
;

return

Data: {JSON.stringify(data)}
; } `

5. Tối ưu hóa với SWRConfig

Sử dụng SWRConfig để cung cấp cấu hình mặc định cho toàn bộ ứng dụng:

` import { SWRConfig } from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() { return ( <SWRConfig value={{ fetcher, refreshInterval: 3000, onError: (err) => console.error(err), }} > ); } `

6. Sử dụng kết hợp SWR với SSR/ISR trong Next.js

Nếu sử dụng Next.js, bạn có thể kết hợp SWR với dữ liệu trả về từ getServerSideProps hoặc getStaticProps.

` import useSWR from 'swr';

export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json();

return { props: { fallbackData: data } }; }

export default function Page({ fallbackData }) { const { data } = useSWR('/api/data', fetcher, { fallbackData });

return

{JSON.stringify(data)}
; } `

7. Khi nào nên sử dụng SWR?

  • SWR phù hợp cho các ứng dụng yêu cầu dữ liệu luôn mới, ví dụ: Dashboard hiển thị dữ liệu thời gian thực.

    • Ứng dụng có danh sách sản phẩm, bài viết được cập nhật thường xuyên.

    • Các hệ thống yêu cầu tối ưu hóa hiệu năng với caching.

8. Lợi ích khi sử dụng SWR

  • Quản lý dữ liệu API gọn gàng hơn.

  • Hiệu suất cao nhờ caching và revalidation.

  • Tích hợp dễ dàng với các thư viện HTTP như Fetch, Axios.

  • Giảm thiểu boilerplate code, tăng năng suất phát triển.

Hãy thử ứng dụng SWR vào dự án ReactJS của bạn để tận hưởng hiệu quả mà nó mang lại!

Bài liên quan trong #ReactJS

✓ Đã sao chép link