การแคชการตอบสนอง API ใน React - Apidog

ในบทความนี้ เราจะสำรวจแนวคิดเรื่องการแคช API, อภิปรายเกี่ยวกับการสร้างส่วนประกอบการแคชแบบกำหนดเองใน React และตรวจสอบเครื่องมือและแพ็คเกจต่างๆ ที่ช่วยลดความซับซ้อนของกระบวนการ ไม่ว่าคุณกำลังมองหาการนำโซลูชันการแคชพื้นฐานไปใช้ หรือใช้ประโยชน์จากเครื่องมือขั้นสูง เช่น React Query และ SWR คู่มือนี้จะให้ข้อมูลเชิงลึกและขั้นตอนการปฏิบัติที่จำเป็นในการปรับปรุงแอปพลิเคชัน React ของคุณด้วยการแคชการตอบสนอง API ที่มีประสิทธิภาพ

ทำไมต้องแคชการตอบสนอง API ใน React?

การแคชการตอบสนอง API เป็นเทคนิคที่สำคัญในการพัฒนาเว็บสมัยใหม่ ซึ่งสามารถช่วยเพิ่มประสิทธิภาพและประสิทธิภาพของแอปพลิเคชันได้อย่างมาก เมื่อแอปพลิเคชันมีความซับซ้อนมากขึ้นเรื่อยๆ แอปพลิเคชันเหล่านั้นจะพึ่งพา API ภายนอกมากขึ้นเรื่อยๆ เพื่อดึงข้อมูล ทำให้การจัดการข้อมูลอย่างมีประสิทธิภาพเป็นข้อกังวลที่สำคัญ เทคนิคที่มีประสิทธิภาพอย่างหนึ่งในการเพิ่มประสิทธิภาพและปรับปรุงประสบการณ์ผู้ใช้คือการแคชการตอบสนอง API ด้วยการจัดเก็บการตอบสนองจากการเรียก API แอปพลิเคชันสามารถลดภาระของเซิร์ฟเวอร์ ลดเวลาในการดึงข้อมูล และมอบประสบการณ์ที่ราบรื่นแก่ผู้ใช้ได้อย่างมาก

ลองนึกภาพสถานการณ์ที่ผู้ใช้กลับมายังหน้าที่พวกเขาเคยเข้าถึงก่อนหน้านี้ แทนที่จะส่งคำขอใหม่ไปยังเซิร์ฟเวอร์และรอให้ดึงข้อมูลอีกครั้ง แอปพลิเคชันสามารถให้บริการการตอบสนองที่จัดเก็บไว้ได้เกือบจะในทันที ซึ่งไม่เพียงแต่ช่วยประหยัดเวลาอันมีค่าเท่านั้น แต่ยังช่วยให้มั่นใจได้ถึงอินเทอร์เฟซที่ราบรื่นและตอบสนองได้ดีขึ้นอีกด้วย

การสร้างส่วนประกอบการแคชแบบกำหนดเอง

การสร้างส่วนประกอบการแคชแบบกำหนดเองใน React ช่วยให้ควบคุมได้อย่างแม่นยำว่าข้อมูลถูกแคชและจัดการอย่างไร ส่วนนี้มีคำแนะนำทีละขั้นตอนในการสร้างส่วนประกอบดังกล่าว พร้อมกับการอภิปรายเกี่ยวกับข้อเสีย

การตั้งค่าส่วนประกอบ

ขั้นแรก ให้ตั้งค่าส่วนประกอบ React พื้นฐานที่จะรับผิดชอบในการดึงและแคชข้อมูล

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>Loading...</div>;

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

การจัดการสถานะ

ฮุก useState ใช้เพื่อจัดการทั้งข้อมูลที่แคชและข้อมูลปัจจุบันที่กำลังดึง ซึ่งช่วยให้ส่วนประกอบสามารถพิจารณาว่าจะให้บริการข้อมูลที่แคชไว้หรือทำการเรียก API ใหม่

การดึงและแคชข้อมูล

ฮุก useEffect มีตรรกะในการตรวจสอบแคชก่อนทำการร้องขอเครือข่าย หากพบข้อมูลในแคช จะถูกใช้โดยตรง มิฉะนั้น จะมีการร้องขอการดึงข้อมูล และผลลัพธ์จะถูกเก็บไว้ในแคช

ข้อมูลหมดอายุ

ในการจัดการการทำให้แคชเป็นโมฆะ คุณสามารถตั้งค่า time-to-live (TTL) สำหรับข้อมูลที่แคชไว้ ซึ่งจะช่วยให้มั่นใจได้ว่าข้อมูลจะได้รับการรีเฟรชเป็นระยะๆ และยังคงทันสมัยอยู่เสมอ

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>Loading...</div>;

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

ข้อเสียของการแคชแบบกำหนดเอง

แม้ว่าการสร้างส่วนประกอบการแคชแบบกำหนดเองจะมีความยืดหยุ่น แต่ก็มีข้อเสียหลายประการเช่นกัน:

• ความซับซ้อน: ตรรกะการแคชแบบกำหนดเองสามารถเพิ่มความซับซ้อนให้กับ codebase ได้อย่างมาก ทำให้ยากต่อการบำรุงรักษาและแก้ไขข้อบกพร่อง
• การบำรุงรักษา: จำเป็นต้องมีการอัปเดตและการบำรุงรักษาเป็นประจำเพื่อให้แน่ใจว่าตรรกะการแคชยังคงทำงานได้อย่างถูกต้องเมื่อแอปพลิเคชันมีการพัฒนา
• ปัญหาด้านความสามารถในการปรับขนาด: เมื่อแอปพลิเคชันเติบโตขึ้น การจัดการโซลูชันการแคชแบบกำหนดเองอาจกลายเป็นเรื่องยากมากขึ้นเรื่อยๆ ซึ่งอาจนำไปสู่ปัญหาคอขวดด้านประสิทธิภาพ

ด้วยการทำความเข้าใจกับความท้าทายเหล่านี้ นักพัฒนาสามารถตัดสินใจได้อย่างชาญฉลาดว่าจะนำการแคชแบบกำหนดเองไปใช้เมื่อใด และเมื่อใดที่จะใช้ประโยชน์จากเครื่องมือขั้นสูงเพิ่มเติม

การใช้แพ็คเกจ NPM สำหรับการแคช

การใช้ประโยชน์จากแพ็คเกจ NPM สามารถลดความซับซ้อนของการนำการแคชไปใช้ในแอปพลิเคชัน React ได้อย่างมาก นี่คือแพ็คเกจยอดนิยมบางส่วนที่สามารถช่วยคุณเริ่มต้นได้:

axios-cache-adapter

axios-cache-adapter รวมความสามารถในการแคชเข้ากับ axios ซึ่งเป็นไคลเอนต์ HTTP ยอดนิยม

การติดตั้ง:

npm install axios axios-cache-adapter

การใช้งาน:

// Import dependencies
import axios from 'axios'
import { setupCache } from 'axios-cache-adapter'

// Create `axios-cache-adapter` instance
const cache = setupCache({
  maxAge: 15 * 60 * 1000
})

// Create `axios` instance passing the newly created `cache.adapter`
const api = axios.create({
  adapter: cache.adapter
})

// Send a GET request to some REST api
api({
  url: 'http://some-rest.api/url',
  method: 'get'
}).then(async (response) => {
  // Do something fantastic with response.data \o/
  console.log('Request response:', response)

  // Interacting with the store, see `localForage` API.
  const length = await cache.store.length()

  console.log('Cache store length:', length)
})

lru-cache

lru-cache ใช้แคช least-recently-used (LRU)

การติดตั้ง:

npm install lru-cache

การใช้งาน:

import LRU from 'lru-cache';

const cache = new LRU({ max: 100 }); // Maximum number of items in 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 ช่วยลดความซับซ้อนในการจัดเก็บคู่คีย์-ค่าใน IndexedDB ซึ่งเป็น API ระดับต่ำสำหรับการจัดเก็บฝั่งไคลเอนต์

การติดตั้ง:

npm install idb-keyval

การใช้งาน:

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;
};

แพ็คเกจเหล่านี้มีวิธีง่ายๆ ในการนำการแคชไปใช้ในแอปพลิเคชัน React ของคุณ ลดความซับซ้อนและความพยายามที่จำเป็นในการจัดการข้อมูลที่แคชไว้ด้วยตนเอง ด้วยการใช้เครื่องมือเหล่านี้ คุณสามารถมุ่งเน้นไปที่การพัฒนาคุณสมบัติของแอปพลิเคชันของคุณได้มากขึ้น ในขณะเดียวกันก็มั่นใจได้ถึงการดึงข้อมูลที่มีประสิทธิภาพและปรับปรุงประสิทธิภาพ

บทนำสู่เครื่องมือขั้นสูงสำหรับการแคช API

เมื่อพูดถึงการแคชการตอบสนอง API ใน React เครื่องมือขั้นสูง เช่น React Query และ SWR นำเสนอโซลูชันที่แข็งแกร่งและมีคุณสมบัติครบถ้วน ซึ่งเหนือกว่าความสามารถของกลไกการแคชที่สร้างขึ้นเอง เครื่องมือเหล่านี้ได้รับการออกแบบมาเพื่อลดความซับซ้อนของการจัดการสถานะ ปรับปรุงการดึงข้อมูล และรับประกันความสอดคล้องของข้อมูล ทั้งหมดนี้ในขณะที่มอบประสบการณ์นักพัฒนาที่ราบรื่น

TanStack Query

TanStack Query (FKA React Query เป็นไลบรารีการดึงข้อมูลอันทรงพลังสำหรับแอปพลิเคชัน React ที่สรุปความซับซ้อนของการจัดการข้อมูลฝั่งเซิร์ฟเวอร์ React Query เปลี่ยนแปลงวิธีการจัดการสถานะเซิร์ฟเวอร์ในแอปพลิเคชัน React ของคุณ โดยมีแคชในตัว การอัปเดตพื้นหลัง และการสนับสนุนแบบ out-of-the-box สำหรับการจัดการข้อผิดพลาด ทำให้ง่ายต่อการจัดการตรรกะการดึงข้อมูลโดยไม่จำเป็นต้องจัดการการแคชและการซิงโครไนซ์สถานะด้วยตนเอง

ประโยชน์เหนือโซลูชันแบบกำหนดเอง:

การจัดการสถานะที่ง่ายขึ้น:
React Query จัดการความซับซ้อนของการแคชและการจัดการสถานะ ทำให้ผู้พัฒนาสามารถมุ่งเน้นไปที่ตรรกะของแอปพลิเคชันได้ โดยสรุปความซับซ้อนของการแคช การทำให้เป็นโมฆะ และการดึงข้อมูลซ้ำ ทำให้มี API ที่สะอาดและใช้งานง่าย

การรีเฟรชพื้นหลังอัตโนมัติ:
React Query สามารถดึงข้อมูลซ้ำในพื้นหลังโดยอัตโนมัติเพื่อให้ข้อมูลเป็นปัจจุบันอยู่เสมอ ซึ่งช่วยให้มั่นใจได้ว่าแอปพลิเคชันของคุณจะแสดงข้อมูลล่าสุดอยู่เสมอโดยไม่จำเป็นต้องทริกเกอร์การรีเฟรชด้วยตนเอง

การอัปเดตเชิงมองโลกในแง่ดี:
ด้วยการอัปเดตเชิงมองโลกในแง่ดี React Query สามารถสะท้อนการเปลี่ยนแปลงใน UI ได้ทันทีก่อนที่เซิร์ฟเวอร์จะยืนยันการอัปเดต ซึ่งมอบประสบการณ์การใช้งานที่ราบรื่นและตอบสนองได้ดี เนื่องจากผู้ใช้สามารถเห็นการกระทำของตนสะท้อนให้เห็นได้ทันที

ตัวอย่าง:

npm install react-query // install the package

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 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

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

โค้ดด้านบนมาจาก หน้าเอกสารอย่างเป็นทางการ และอธิบายวิธีพื้นฐานในการดึงข้อมูล ดังที่คุณเห็นจากโค้ดด้านบน TanStack Query ทำให้เราดึงข้อมูลได้อย่างง่ายดาย และยังแคชข้อมูลเหล่านั้นได้อย่างง่ายดาย

SWR (Stale-While-Revalidate)

SWR ซึ่งพัฒนาโดย Vercel เป็นไลบรารีการดึงข้อมูลยอดนิยมอีกแห่งสำหรับ React ที่เน้นความเรียบง่ายและประสิทธิภาพ ชื่อ "SWR" ย่อมาจาก "stale-while-revalidate" ซึ่งเป็นกลยุทธ์การแคชที่ให้บริการข้อมูลที่ล้าสมัยในขณะที่ดึงข้อมูลใหม่ในพื้นหลัง

SWR มี API ที่ใช้งานง่ายมากสำหรับการดึงข้อมูลและการแคช ช่วยให้มั่นใจได้ว่าแอปพลิเคชันของคุณจะแสดงข้อมูลทันที (ข้อมูลที่ล้าสมัย) จากนั้นตรวจสอบความถูกต้องใหม่โดยการดึงข้อมูลใหม่ในพื้นหลัง กลยุทธ์นี้ให้ความสมดุลระหว่างประสิทธิภาพและความสดใหม่ของข้อมูล

ประโยชน์เหนือโซลูชันแบบกำหนดเอง:

ใช้งานง่าย:
API ของ SWR นั้นง่ายและใช้งานง่าย ทำให้เข้าถึงได้สำหรับนักพัฒนาในทุกระดับทักษะ โดยจัดการการดึงข้อมูล การแคช การซิงโครไนซ์ และการจัดการข้อผิดพลาดด้วยการกำหนดค่าเพียงเล็กน้อย

ความสอดคล้องของข้อมูล:
SWR ช่วยให้มั่นใจได้ว่าข้อมูลแอปพลิเคชันของคุณจะสดใหม่อยู่เสมอ โดยจะตรวจสอบความถูกต้องของข้อมูลใหม่ในพื้นหลังโดยอัตโนมัติ ทำให้ผู้ใช้ได้รับข้อมูลล่าสุดโดยไม่จำเป็นต้องรีเฟรชด้วยตนเอง

การจัดการข้อผิดพลาด:
การจัดการข้อผิดพลาดในตัวใน SWR ทำให้ง่ายต่อการจัดการข้อผิดพลาดในระหว่างการดึงข้อมูล โดยมีฮุกเพื่อแสดงข้อความแสดงข้อผิดพลาดหรือส่วนประกอบ UI สำรองเมื่อการดึงข้อมูลล้มเหลว

ตัวอย่าง:

npm install swr // install the package

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>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

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

ทั้ง React Query และ SWR มีโซลูชันที่ครอบคลุมสำหรับการจัดการข้อมูลฝั่งเซิร์ฟเวอร์ในแอปพลิเคชัน React โดยลดความซับซ้อนของกระบวนการดึงข้อมูล การแคช และการซิงโครไนซ์ข้อมูล โดยนำเสนอคุณสมบัติอันทรงพลังที่ลดความจำเป็นในการใช้ตรรกะการแคชแบบกำหนดเอง ด้วยการใช้ประโยชน์จากเครื่องมือเหล่านี้ นักพัฒนาสามารถมั่นใจได้ว่าแอปพลิเคชันของตนมีประสิทธิภาพ ทำงานได้ดี และมอบประสบการณ์การใช้งานที่ราบรื่น

การทำงานกับ Apidog

Apidog ช่วยเพิ่มความปลอดภัยของ API โดยนำเสนอเอกสารประกอบที่แข็งแกร่ง การทดสอบอัตโนมัติ และการตรวจสอบตามเวลาจริง Apidog ยังช่วยในการปฏิบัติตามมาตรฐานอุตสาหกรรม เช่น GDPR และ HIPAA ทำให้มั่นใจได้ว่า API ของคุณจะปกป้องข้อมูลผู้ใช้อย่างมีประสิทธิภาพ

นอกจากนี้ Apidog ยังสนับสนุนการทำงานร่วมกันเป็นทีม ส่งเสริมสภาพแวดล้อมการพัฒนาที่เน้นความปลอดภัย ด้วยการรวม Apidog คุณสามารถสร้าง API ที่ปลอดภัย เชื่อถือได้ และเป็นไปตามข้อกำหนด ปกป้องข้อมูลและผู้ใช้ของคุณจากภัยคุกคามด้านความปลอดภัยต่างๆ

บทสรุป

การเพิ่มประสิทธิภาพเวลาตอบสนอง API เป็นสิ่งสำคัญสำหรับการปรับปรุงประสิทธิภาพและประสบการณ์ผู้ใช้ของเว็บแอปพลิเคชันสมัยใหม่ การแคชการตอบสนอง API สามารถลดภาระของเซิร์ฟเวอร์ได้อย่างมากและปรับปรุงความเร็วในการดึงข้อมูล ในขณะที่การสร้างส่วนประกอบการแคชแบบกำหนดเองใน React มีความยืดหยุ่น การใช้ประโยชน์จากเครื่องมือขั้นสูง เช่น React Query และ SWR สามารถปรับปรุงกระบวนการและมอบคุณสมบัติเพิ่มเติม เช่น การอัปเดตพื้นหลังอัตโนมัติและการจัดการข้อผิดพลาด

นอกจากนี้ การใช้แพ็คเกจ NPM เช่น axios-cache-adapter, lru-cache และ idb-keyval สามารถลดความซับซ้อนของการนำการแคชไปใช้และลดความซับซ้อนของการจัดการข้อมูลที่แคชไว้ สำหรับการจัดการ API ที่ครอบคลุม เครื่องมือต่างๆ เช่น Apidog นำเสนอโซลูชันที่แข็งแกร่งสำหรับการออกแบบ การทดสอบ และการตรวจสอบ API ทำให้มั่นใจได้ถึงความน่าเชื่อถือและประสิทธิภาพตลอดวงจรการพัฒนา

ด้วยการรวมเครื่องมือและกลยุทธ์เหล่านี้ นักพัฒนาสามารถสร้างแอปพลิเคชันที่ตอบสนองและทำงานได้ดี ซึ่งมอบประสบการณ์การใช้งานที่ราบรื่น