Lưu trữ phản hồi API trong React

Trong bài viết này, chúng ta sẽ khám phá khái niệm về caching API, thảo luận về việc tạo một thành phần caching tùy chỉnh trong React, và xem xét các công cụ và gói khác nhau giúp đơn giản hóa quy trình. Dù bạn đang tìm kiếm để triển khai một giải pháp caching cơ bản hay tận dụng các công cụ tiên tiến như React Query và SWR, hướng dẫn này sẽ cung cấp những hiểu biết và các bước thực tiễn cần thiết để tối ưu hóa các ứng dụng React của bạn với caching phản hồi API hiệu quả.

Tại sao Caching Phản hồi API trong React?

Caching phản hồi API là một kỹ thuật quan trọng trong phát triển web hiện đại có thể nâng cao đáng kể hiệu suất và hiệu quả của các ứng dụng. Khi các ứng dụng trở nên phức tạp hơn, chúng ngày càng phụ thuộc vào các API bên ngoài để lấy dữ liệu, khiến việc quản lý dữ liệu hiệu quả trở thành một mối quan tâm quan trọng. Một kỹ thuật mạnh mẽ để tối ưu hóa hiệu suất và nâng cao trải nghiệm người dùng là caching phản hồi API. Bằng cách lưu trữ các phản hồi từ các cuộc gọi API, các ứng dụng có thể giảm tải cho máy chủ một cách đáng kể, tối thiểu hóa thời gian lấy dữ liệu, và cung cấp trải nghiệm liền mạch cho người dùng.

Hãy tưởng tượng một kịch bản mà một người dùng quay lại trang mà họ đã truy cập trước đó—thay vì thực hiện một yêu cầu mới đến máy chủ và chờ dữ liệu được lấy lại, ứng dụng có thể cung cấp phản hồi đã lưu trữ gần như ngay lập tức. Điều này không chỉ tiết kiệm thời gian quý báu mà còn đảm bảo một giao diện mượt mà hơn và phản ứng nhanh hơn.

Tạo một Thành phần Caching Tùy Chỉnh

Tạo một thành phần caching tùy chỉnh trong React cho phép kiểm soát chính xác cách thức dữ liệu được caching và quản lý. Phần này cung cấp một hướng dẫn từng bước để xây dựng một thành phần như vậy, cùng với thảo luận về những nhược điểm của nó.

Cài đặt Thành phần

Đầu tiên, thiết lập một thành phần React cơ bản sẽ chịu trách nhiệm lấy và caching dữ liệu.


import React, { useState, useEffect } from 'react';

const useCustomCache = (apiUrl) => {
  const [data, setData] = useState(null);
  const [cache, setCache] = useState({});

  useEffect(() => {
    if (cache[apiUrl]) {
      setData(cache[apiUrl]);
    } else {
      fetch(apiUrl)
        .then(response => response.json())
        .then(result => {
          setCache(prevCache => ({ ...prevCache, [apiUrl]: result }));
          setData(result);
        });
    }
  }, [apiUrl, cache]);

  return data;
};

export function App(props) {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const data = useCustomCache(apiUrl);

  if (!data) return <div>Đang tải...</div>;

  return (
    <div className='App'>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

Quản lý Trạng thái

Hook useState được sử dụng để quản lý cả dữ liệu đã được caching và dữ liệu hiện tại đang được lấy. Điều này cho phép thành phần xác định xem có phục vụ dữ liệu đã caching hay thực hiện một cuộc gọi API mới.

Lấy và Caching Dữ liệu

Hook useEffect chứa logic để kiểm tra cache trước khi thực hiện một yêu cầu mạng. Nếu dữ liệu được tìm thấy trong cache, nó sẽ được sử dụng trực tiếp; nếu không, một yêu cầu fetch sẽ được thực hiện, và kết quả sẽ được lưu trữ trong cache.

Thời hạn Dữ liệu

Để xử lý việc vô hiệu hóa cache, bạn có thể đặt một thời gian sống (TTL) cho dữ liệu đã caching. Điều này đảm bảo rằng dữ liệu được làm mới định kỳ và luôn cập nhật.

import React, { useState, useEffect } from 'react';

const useCustomCache = (apiUrl, ttl = 60000) => {
  const [data, setData] = useState(null);
  const [cache, setCache] = useState({});

  useEffect(() => {
    const cachedData = cache[apiUrl];
    if (cachedData && (Date.now() - cachedData.timestamp < ttl)) {
      setData(cachedData.data);
    } else {
      fetch(apiUrl)
        .then(response => response.json())
        .then(result => {
          setCache(prevCache => ({ ...prevCache, [apiUrl]: { data: result, timestamp: Date.now() } }));
          setData(result);
        });
    }
  }, [apiUrl, cache, ttl]);

  return data;
};

export function App(props) {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const data = useCustomCache(apiUrl);

  if (!data) return <div>Đang tải...</div>;

  return (
    <div className='App'>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

Nhược điểm của Caching Tùy Chỉnh

Trong khi việc tạo một thành phần caching tùy chỉnh mang đến sự linh hoạt, nó cũng đi kèm với một số nhược điểm:

Phức tạp: Logic caching tùy chỉnh có thể làm tăng đáng kể độ phức tạp của mã nguồn, làm cho nó khó duy trì và gỡ lỗi.
Bảo trì: Cần thường xuyên cập nhật và bảo trì để đảm bảo logic caching hoạt động chính xác khi ứng dụng phát triển.
Vấn đề Khả năng Mở Rộng: Khi ứng dụng phát triển, việc quản lý giải pháp caching tùy chỉnh có thể trở nên khó khăn, có thể dẫn đến tắc nghẽn hiệu suất.

Bằng cách hiểu những thách thức này, các nhà phát triển có thể đưa ra quyết định thông thái về việc khi nào nên triển khai caching tùy chỉnh và khi nào nên tận dụng các công cụ tiên tiến hơn

Sử dụng Gói NPM cho Caching

Tận dụng các gói NPM có thể đơn giản hóa đáng kể việc triển khai caching trong các ứng dụng React. Dưới đây là một vài gói phổ biến có thể giúp bạn bắt đầu:

axios-cache-adapter

axios-cache-adapter tích hợp khả năng caching vào axios, một HTTP client phổ biến.

Cài đặt:

npm install axios axios-cache-adapter

Sử dụng:

// Nhập các phụ thuộc
import axios from 'axios'
import { setupCache } from 'axios-cache-adapter'

// Tạo một instance `axios-cache-adapter`
const cache = setupCache({
  maxAge: 15 * 60 * 1000
})

// Tạo instance `axios` với `cache.adapter` vừa tạo
const api = axios.create({
  adapter: cache.adapter
})

// Gửi một yêu cầu GET đến một API REST nào đó
api({
  url: 'http://some-rest.api/url',
  method: 'get'
}).then(async (response) => {
  // Làm điều gì đó thú vị với response.data \o/
  console.log('Phản hồi yêu cầu:', response)

  // Tương tác với kho lưu trữ, xem API `localForage`.
  const length = await cache.store.length()

  console.log('Độ dài kho lưu trữ cache:', length)
})

lru-cache

lru-cache triển khai một cache LRU (least-recently-used).

Cài đặt:

npm install lru-cache

Sử dụng:

import LRU from 'lru-cache';

const cache = new LRU({ max: 100 }); // Số lượng tối đa các mục trong cache

const fetchData = async (url) => {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const response = await fetch(url);
  const data = await response.json();
  cache.set(url, data);
  return data;
};

idb-keyval

idb-keyval đơn giản hóa việc lưu trữ các cặp khóa-giá trị trong IndexedDB, một API cấp thấp cho lưu trữ phía khách hàng.

Cài đặt:

npm install idb-keyval

Sử dụng:

import { get, set } from 'idb-keyval';

const fetchData = async (url) => {
  const cachedData = await get(url);
  if (cachedData) {
    return cachedData;
  }
  const response = await fetch(url);
  const data = await response.json();
  await set(url, data);
  return data;
};

Các gói này cung cấp một cách đơn giản để triển khai caching trong các ứng dụng React của bạn, giảm thiểu độ phức tạp và nỗ lực cần thiết để quản lý dữ liệu đã caching một cách thủ công. Bằng cách sử dụng các công cụ này, bạn có thể tập trung hơn vào việc phát triển các tính năng của ứng dụng của mình trong khi đảm bảo việc lấy dữ liệu hiệu quả và cải thiện hiệu suất.

Giới thiệu về các Công cụ Nâng cao cho Caching API

Khi nói đến việc caching các phản hồi API trong React, các công cụ nâng cao như React Query và SWR cung cấp các giải pháp mạnh mẽ, phong phú tính năng vượt qua khả năng của các cơ chế caching tự xây dựng. Các công cụ này được thiết kế để đơn giản hóa việc quản lý trạng thái, nâng cao việc lấy dữ liệu, và đảm bảo tính nhất quán của dữ liệu, tất cả trong khi cung cấp trải nghiệm phát triển liền mạch.

TanStack Query

TanStack Query (trước đây là React Query) là một thư viện lấy dữ liệu mạnh mẽ cho các ứng dụng React giúp trừu tượng hóa những phức tạp trong việc quản lý dữ liệu từ máy chủ. React Query biến đổi cách bạn xử lý trạng thái máy chủ trong các ứng dụng React của mình. Nó cung cấp tính năng caching tích hợp, cập nhật nền và hỗ trợ xử lý lỗi ngay từ đầu, giúp dễ dàng quản lý logic lấy dữ liệu mà không cần phải xử lý caching và đồng bộ hóa trạng thái thủ công.

Lợi ích so với Các Giải pháp Tùy chỉnh:

Quản lý Trạng thái Đơn giản:
React Query xử lý các phức tạp về caching và quản lý trạng thái, cho phép các nhà phát triển tập trung vào logic ứng dụng. Nó trừu tượng hóa các phức tạp của việc caching, vô hiệu hóa và lấy lại dữ liệu, cung cấp một API rõ ràng và trực quan.

Cập nhật Nền Tự động:
React Query có thể tự động lấy lại dữ liệu trong nền để giữ cho nó luôn cập nhật. Điều này đảm bảo rằng ứng dụng của bạn luôn hiển thị dữ liệu mới nhất mà không cần các kích hoạt làm mới thủ công.

Cập nhật Lạc quan:
Với cập nhật lạc quan, React Query có thể ngay lập tức phản ánh các thay đổi trong giao diện người dùng trước khi máy chủ xác nhận cập nhật. Điều này cung cấp một trải nghiệm người dùng mượt mà và phản ứng nhanh, vì người dùng có thể thấy hành động của họ được phản ánh ngay lập tức.

Ví dụ:

npm install react-query // cài đặt gói

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/users').then((res) =>
        res.json(),
      ),
  })
  console.log(data)

  if (isPending) return 'Đang tải...'

  if (error) return 'Một lỗi đã xảy ra: ' + error.message

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

Mã trên từ trang tài liệu chính thức, và nó giải thích cách cơ bản để lấy dữ liệu. Như bạn có thể thấy từ các mã trên, TanStack Query giúp chúng ta dễ dàng lấy dữ liệu, và cũng dễ dàng caching dữ liệu đó.

SWR (Stale-While-Revalidate)

SWR, được phát triển bởi Vercel, là một thư viện lấy dữ liệu phổ biến khác cho React nhấn mạnh sự đơn giản và hiệu quả. Tên gọi "SWR" có nghĩa là "stale-while-revalidate," một chiến lược caching phục vụ dữ liệu lỗi thời trong khi lấy dữ liệu mới trong nền.

SWR cung cấp một API rất trực quan cho việc lấy và caching dữ liệu. Nó đảm bảo rằng ứng dụng của bạn hiển thị dữ liệu ngay lập tức (dữ liệu lỗi thời) và sau đó xác thực bằng cách lấy dữ liệu mới trong nền. Chiến lược này cung cấp sự cân bằng giữa hiệu suất và độ mới của dữ liệu.

Lợi ích so với Các Giải pháp Tùy chỉnh:

Dễ sử dụng:
SWR’s API rất đơn giản và dễ sử dụng, làm cho nó dễ tiếp cận cho các nhà phát triển ở mọi cấp độ kỹ năng. Nó xử lý việc lấy dữ liệu, caching, đồng bộ hóa và xử lý lỗi với cấu hình tối thiểu.

Tính Nhất quán Dữ liệu:
SWR đảm bảo rằng dữ liệu ứng dụng của bạn luôn mới. Nó tự động xác thực dữ liệu trong nền, cung cấp cho người dùng thông tin cập nhật nhất mà không cần làm mới thủ công.

Xử lý Lỗi:
Xử lý lỗi tích hợp trong SWR giúp dễ dàng quản lý lỗi trong quá trình lấy dữ liệu. Nó cung cấp các hook để hiển thị thông báo lỗi hoặc các thành phần giao diện người dùng dự phòng khi việc lấy dữ liệu bị lỗi.

Ví dụ:

npm install swr // cài đặt gói

import useSWR from 'swr';

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

export default Example = () => {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const { data, error } = useSWR(apiUrl, fetcher);

  if (!data) return <div>Đang tải...</div>;
  if (error) return <div>Lỗi: {error.message}</div>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

Cả React Query và SWR đều cung cấp các giải pháp toàn diện cho việc quản lý dữ liệu từ máy chủ trong các ứng dụng React. Chúng đơn giản hóa quy trình lấy, caching và đồng bộ hóa dữ liệu, cung cấp các tính năng mạnh mẽ giúp giảm thiểu nhu cầu về logic caching tùy chỉnh. Bằng cách tận dụng các công cụ này, các nhà phát triển có thể đảm bảo rằng các ứng dụng của họ hiệu quả, hoạt động tốt, và mang lại trải nghiệm người dùng liền mạch.

Làm việc với Apidog

Apidog nâng cao bảo mật API bằng cách cung cấp tài liệu vững chắc, kiểm tra tự động và giám sát theo thời gian thực. Apidog cũng hỗ trợ tuân thủ các tiêu chuẩn ngành như GDPR và HIPAA, đảm bảo rằng các API của bạn bảo vệ dữ liệu người dùng hiệu quả.

Thêm vào đó, Apidog hỗ trợ sự hợp tác của nhóm, thúc đẩy một môi trường phát triển tập trung vào bảo mật. Bằng cách tích hợp Apidog, bạn có thể xây dựng các API an toàn, đáng tin cậy và tuân thủ, bảo vệ dữ liệu và người dùng của bạn khỏi các mối đe dọa bảo mật khác nhau.

button

Kết luận

Tối ưu hóa thời gian phản hồi API là rất quan trọng để nâng cao hiệu suất và trải nghiệm người dùng của các ứng dụng web hiện đại. Caching phản hồi API có thể giảm đáng kể tải cho máy chủ và cải thiện tốc độ lấy dữ liệu. Trong khi xây dựng các thành phần caching tùy chỉnh trong React mang đến sự linh hoạt, việc tận dụng các công cụ tiên tiến như React Query và SWR có thể làm đơn giản hóa quy trình và cung cấp các tính năng bổ sung như cập nhật nền tự động và xử lý lỗi.

Hơn nữa, việc sử dụng các gói NPM như axios-cache-adapter, lru-cache, và idb-keyval có thể đơn giản hóa việc triển khai caching và giảm thiểu độ phức tạp của việc quản lý dữ liệu đã caching. Đối với việc quản lý API toàn diện, các công cụ như Apidog cung cấp các giải pháp vững chắc cho thiết kế, kiểm tra và giám sát API, đảm bảo tính đáng tin cậy và hiệu quả trong suốt vòng đời phát triển.

Bằng cách kết hợp những công cụ và chiến lược này, các nhà phát triển có thể tạo ra các ứng dụng phản hồi nhanh và hiệu suất cao mang lại trải nghiệm người dùng liền mạch.