React Suspense வள ஆதார செல்லுபடியாக்கம்: கேச் காலாவதி மேலாண்மையில் தேர்ச்சி பெறுதல்

React Suspense நமது செயலிகளில் ஒத்திசைவற்ற தரவு மீட்டெடுப்பை கையாளும் முறையை புரட்சிகரமாக மாற்றியுள்ளது. இருப்பினும், Suspense-ஐ மட்டும் பயன்படுத்துவது போதாது. நமது கேச்-ஐ எவ்வாறு நிர்வகிப்பது மற்றும் தரவு நிலைத்தன்மையை உறுதி செய்வது என்பதை நாம் கவனமாக பரிசீலிக்க வேண்டும். வள ஆதார செல்லுபடியாக்கம், குறிப்பாக கேச் காலாவதி, இந்த செயல்முறையின் ஒரு முக்கிய அம்சமாகும். இந்த கட்டுரை React Suspense உடன் பயனுள்ள கேச் காலாவதி உத்திகளைப் புரிந்துகொள்வதற்கும் செயல்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது.

சிக்கலைப் புரிந்துகொள்ளுதல்: காலாவதியான தரவு மற்றும் செல்லுபடியாக்கம் தேவை

ஒரு தொலைநிலை மூலத்திலிருந்து பெறப்பட்ட தரவைக் கையாளும் எந்தவொரு செயலியிலும், காலாவதியான தரவு ஏற்படுவதற்கான வாய்ப்பு உள்ளது. காலாவதியான தரவு என்பது பயனருக்கு காட்டப்படும் தகவல் சமீபத்திய பதிப்பு அல்ல என்பதைக் குறிக்கிறது. இது ஒரு மோசமான பயனர் அனுபவம், தவறான தகவல் மற்றும் செயலி பிழைகளுக்கு கூட வழிவகுக்கும். வள ஆதார செல்லுபடியாக்கம் மற்றும் கேச் காலாவதி ஏன் அவசியம் என்பது இங்கே:

• தரவு நிலையற்ற தன்மை: சில தரவுகள் அடிக்கடி மாறுகின்றன (எ.கா., பங்கு விலைகள், சமூக ஊடக ஊட்டங்கள், நிகழ்நேர பகுப்பாய்வுகள்). செல்லுபடியாக்கம் இல்லாமல், உங்கள் செயலி காலாவதியான தகவலைக் காட்டக்கூடும். தவறான பங்கு விலைகளைக் காட்டும் ஒரு நிதிச் செயலியை கற்பனை செய்து பாருங்கள் – அதன் விளைவுகள் குறிப்பிடத்தக்கதாக இருக்கலாம்.
• பயனர் நடவடிக்கைகள்: பயனர் தொடர்புகள் (எ.கா., தரவை உருவாக்குதல், புதுப்பித்தல் அல்லது நீக்குதல்) பெரும்பாலும் மாற்றங்களைப் பிரதிபலிக்க கேச் செய்யப்பட்ட தரவை செல்லுபடியாக்க வேண்டிய அவசியத்தை ஏற்படுத்துகின்றன. உதாரணமாக, ஒரு பயனர் தனது சுயவிவரப் படத்தைப் புதுப்பித்தால், செயலியின் வேறு இடங்களில் காட்டப்படும் கேச் செய்யப்பட்ட பதிப்பு செல்லுபடியாக்கப்பட்டு மீண்டும் பெறப்பட வேண்டும்.
• சர்வர் பக்க புதுப்பிப்புகள்: பயனர் நடவடிக்கைகள் இல்லாவிட்டாலும், சர்வர் பக்க தரவு வெளிப்புற காரணிகள் அல்லது பின்னணி செயல்முறைகள் காரணமாக மாறக்கூடும். ஒரு உள்ளடக்க மேலாண்மை அமைப்பு ஒரு கட்டுரையைப் புதுப்பித்தால், உதாரணமாக, கிளையன்ட் பக்கத்தில் அந்த கட்டுரையின் எந்தவொரு கேச் செய்யப்பட்ட பதிப்பையும் செல்லுபடியாக்க வேண்டும்.

கேச்-ஐ சரியாக செல்லுபடியாக்கத் தவறினால், பயனர்கள் காலாவதியான தகவலைப் பார்ப்பது, தவறான தரவுகளின் அடிப்படையில் முடிவுகளை எடுப்பது, அல்லது செயலியில் முரண்பாடுகளை அனுபவிப்பது போன்றவற்றுக்கு வழிவகுக்கும்.

React Suspense மற்றும் தரவு மீட்டெடுப்பு: ஒரு விரைவான மறுபார்வை

வள ஆதார செல்லுபடியாக்கம் பற்றி பார்ப்பதற்கு முன், React Suspense தரவு மீட்டெடுப்புடன் எவ்வாறு செயல்படுகிறது என்பதை சுருக்கமாக மறுபரிசீலனை செய்வோம். Suspense, தரவு மீட்டெடுப்பு போன்ற ஒத்திசைவற்ற செயல்பாடுகள் முடிவடையும் வரை காத்திருக்கும் போது, கூறுகள் ரெண்டரிங்கை "இடைநிறுத்த" அனுமதிக்கிறது. இது ஏற்றுதல் நிலைகள் மற்றும் பிழை எல்லைகளைக் கையாளுவதற்கு ஒரு அறிவிப்பு அணுகுமுறையை செயல்படுத்துகிறது.

Suspense பணிப்பாய்வின் முக்கிய கூறுகள் பின்வருமாறு:

• Suspense: `<Suspense>` கூறு இடைநிறுத்தப்படக்கூடிய கூறுகளைச் சுற்ற அனுமதிக்கிறது. இது ஒரு `fallback` ப்ராப்பை எடுக்கும், இது இடைநிறுத்தப்பட்ட கூறு தரவிற்காக காத்திருக்கும் போது ரெண்டர் செய்யப்படுகிறது.
• பிழை எல்லைகள்: பிழை எல்லைகள் ரெண்டரிங்கின் போது ஏற்படும் பிழைகளைப் பிடிக்கின்றன, இடைநிறுத்தப்பட்ட கூறுகளில் ஏற்படும் தோல்விகளை அழகாகக் கையாள ஒரு வழிமுறையை வழங்குகின்றன.
• தரவு மீட்டெடுப்பு நூலகங்கள் (எ.கா., `react-query`, `SWR`, `urql`): இந்த நூலகங்கள் தரவை மீட்டெடுப்பதற்கும், முடிவுகளை கேச் செய்வதற்கும், ஏற்றுதல் மற்றும் பிழை நிலைகளைக் கையாளுவதற்கும் ஹூக்ஸ் மற்றும் பயன்பாடுகளை வழங்குகின்றன. அவை பெரும்பாலும் Suspense உடன் தடையின்றி ஒருங்கிணைக்கப்படுகின்றன.

`react-query` மற்றும் Suspense ஐப் பயன்படுத்தி ஒரு எளிமையான எடுத்துக்காட்டு இங்கே:

import { useQuery } from 'react-query';
import React from 'react';

const fetchUserData = async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
    throw new Error('பயனர் தரவை மீட்டெடுப்பதில் தோல்வி');
  }
  return response.json();
};

function UserProfile({ userId }) {
  const { data: user } = useQuery(['user', userId], () => fetchUserData(userId), { suspense: true });

  return (
    <div>
      <h2>{user.name}</h2>
      <p>மின்னஞ்சல்: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>பயனர் தரவு ஏற்றப்படுகிறது...</div>}>
      <UserProfile userId="123" />
    </Suspense>
  );
}

export default App;

இந்த எடுத்துக்காட்டில், `react-query`-இலிருந்து `useQuery` பயனர் தரவை மீட்டெடுத்து, காத்திருக்கும் போது `UserProfile` கூறை இடைநிறுத்துகிறது. `<Suspense>` கூறு ஒரு ஃபால்பேக்காக ஏற்றுதல் காட்சியைக் காட்டுகிறது.

கேச் காலாவதி மற்றும் செல்லுபடியாக்குவதற்கான உத்திகள்

இப்போது, React Suspense செயலிகளில் கேச் காலாவதி மற்றும் செல்லுபடியாக்குதலை நிர்வகிப்பதற்கான வெவ்வேறு உத்திகளை ஆராய்வோம்:

1. நேர அடிப்படையிலான காலாவதி (TTL - Time To Live)

நேர அடிப்படையிலான காலாவதி, கேச் செய்யப்பட்ட தரவுகளுக்கு அதிகபட்ச ஆயுட்காலம் (TTL) அமைப்பதை உள்ளடக்குகிறது. TTL காலாவதியான பிறகு, தரவு காலாவதியானதாகக் கருதப்பட்டு அடுத்த கோரிக்கையில் மீண்டும் பெறப்படுகிறது. இது ஒரு எளிய மற்றும் பொதுவான அணுகுமுறை, அடிக்கடி மாறாத தரவுகளுக்கு ஏற்றது.

செயல்படுத்துதல்: பெரும்பாலான தரவு மீட்டெடுப்பு நூலகங்கள் TTL ஐ உள்ளமைக்க விருப்பங்களை வழங்குகின்றன. உதாரணமாக, `react-query`-இல், நீங்கள் `staleTime` விருப்பத்தைப் பயன்படுத்தலாம்:

import { useQuery } from 'react-query';

const fetchUserData = async (userId) => { ... };

function UserProfile({ userId }) {
  const { data: user } = useQuery(['user', userId], () => fetchUserData(userId), {
    suspense: true,
    staleTime: 60 * 1000, // 60 வினாடிகள் (1 நிமிடம்)
  });

  return (
    <div>
      <h2>{user.name}</h2>
      <p>மின்னஞ்சல்: {user.email}</p>
    </div>
  );
}

இந்த எடுத்துக்காட்டில், `staleTime` 60 வினாடிகளாக அமைக்கப்பட்டுள்ளது. இதன் பொருள், ஆரம்ப மீட்டெடுப்பிலிருந்து 60 வினாடிகளுக்குள் பயனர் தரவு மீண்டும் அணுகப்பட்டால், கேச் செய்யப்பட்ட தரவு பயன்படுத்தப்படும். 60 வினாடிகளுக்குப் பிறகு, தரவு காலாவதியானதாகக் கருதப்படுகிறது, மேலும் `react-query` அதை பின்னணியில் தானாகவே மீண்டும் பெறும். `cacheTime` விருப்பம் செயலற்ற கேச் தரவு எவ்வளவு காலம் நீடிக்கும் என்பதைக் குறிப்பிடுகிறது. அமைக்கப்பட்ட `cacheTime`-க்குள் அணுகப்படாவிட்டால், தரவு குப்பை சேகரிக்கப்படும்.

கருத்தில் கொள்ள வேண்டியவை:

• சரியான TTL-ஐத் தேர்ந்தெடுப்பது: TTL மதிப்பு தரவின் நிலையற்ற தன்மையைப் பொறுத்தது. வேகமாக மாறும் தரவுகளுக்கு, ஒரு குறுகிய TTL அவசியம். ஒப்பீட்டளவில் நிலையான தரவுகளுக்கு, ஒரு நீண்ட TTL செயல்திறனை மேம்படுத்தும். சரியான சமநிலையைக் கண்டறிய கவனமான பரிசீலனை தேவை. பரிசோதனை மற்றும் கண்காணிப்பு உகந்த TTL மதிப்புகளைத் தீர்மானிக்க உதவும்.
• உலகளாவிய மற்றும் நுணுக்கமான TTL: நீங்கள் அனைத்து கேச் செய்யப்பட்ட தரவுகளுக்கும் ஒரு உலகளாவிய TTL ஐ அமைக்கலாம் அல்லது குறிப்பிட்ட வளங்களுக்கு வெவ்வேறு TTL களை உள்ளமைக்கலாம். நுணுக்கமான TTL-கள் ஒவ்வொரு தரவு மூலத்தின் தனித்துவமான பண்புகளின் அடிப்படையில் கேச் நடத்தையை மேம்படுத்த உங்களை அனுமதிக்கின்றன. உதாரணமாக, அடிக்கடி புதுப்பிக்கப்படும் தயாரிப்பு விலைகள், குறைவாக மாறும் பயனர் சுயவிவரத் தகவலை விட குறுகிய TTL ஐக் கொண்டிருக்கலாம்.
• CDN கேச்சிங்: நீங்கள் ஒரு உள்ளடக்க விநியோக வலையமைப்பை (CDN) பயன்படுத்துகிறீர்கள் என்றால், CDN-ம் தரவை கேச் செய்கிறது என்பதை நினைவில் கொள்ளுங்கள். சீரான நடத்தையை உறுதி செய்ய உங்கள் கிளையன்ட் பக்க TTL-களை CDN-இன் கேச் அமைப்புகளுடன் ஒருங்கிணைக்க வேண்டும். தவறாக உள்ளமைக்கப்பட்ட CDN அமைப்புகள், சரியான கிளையன்ட் பக்க செல்லுபடியாக்கம் இருந்தபோதிலும், பயனர்களுக்கு காலாவதியான தரவு வழங்கப்படுவதற்கு வழிவகுக்கும்.

2. நிகழ்வு அடிப்படையிலான செல்லுபடியாக்கம் (கையேடு செல்லுபடியாக்கம்)

நிகழ்வு அடிப்படையிலான செல்லுபடியாக்கம், சில நிகழ்வுகள் ஏற்படும் போது வெளிப்படையாக கேச்-ஐ செல்லுபடியாக்குவதை உள்ளடக்குகிறது. ஒரு குறிப்பிட்ட பயனர் நடவடிக்கை அல்லது சர்வர் பக்க நிகழ்வு காரணமாக தரவு மாறிவிட்டது என்பதை நீங்கள் அறிந்திருக்கும் போது இது பொருத்தமானது.

செயல்படுத்துதல்: தரவு மீட்டெடுப்பு நூலகங்கள் பொதுவாக கேச் உள்ளீடுகளை கைமுறையாக செல்லுபடியாக்க முறைகளை வழங்குகின்றன. `react-query`-இல், நீங்கள் `queryClient.invalidateQueries` முறையைப் பயன்படுத்தலாம்:

import { useQueryClient } from 'react-query';

function UpdateProfileButton({ userId }) {
  const queryClient = useQueryClient();

  const handleUpdate = async () => {
    // ... சர்வரில் பயனர் சுயவிவரத் தரவைப் புதுப்பிக்கவும்

    // பயனர் தரவு கேச்-ஐ செல்லுபடியாக்கவும்
    queryClient.invalidateQueries(['user', userId]);
  };

  return <button onClick={handleUpdate}>சுயவிவரத்தைப் புதுப்பிக்கவும்</button>;
}

இந்த எடுத்துக்காட்டில், பயனர் சுயவிவரம் சர்வரில் புதுப்பிக்கப்பட்ட பிறகு, `queryClient.invalidateQueries(['user', userId])` அழைக்கப்பட்டு தொடர்புடைய கேச் உள்ளீடு செல்லுபடியாக்கப்படுகிறது. அடுத்த முறை `UserProfile` கூறு ரெண்டர் செய்யப்படும்போது, தரவு மீண்டும் பெறப்படும்.

கருத்தில் கொள்ள வேண்டியவை:

• செல்லுபடியாக்கல் நிகழ்வுகளை அடையாளம் காணுதல்: நிகழ்வு அடிப்படையிலான செல்லுபடியாக்குதலின் திறவுகோல், தரவு மாற்றங்களைத் தூண்டும் நிகழ்வுகளைத் துல்லியமாக அடையாளம் காண்பது. இது பயனர் நடவடிக்கைகளைக் கண்காணிப்பது, சர்வரிலிருந்து அனுப்பப்பட்ட நிகழ்வுகளை (SSE) கேட்பது, அல்லது நிகழ்நேர புதுப்பிப்புகளைப் பெற WebSockets-ஐப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம். கேச் தேவைப்படும் போதெல்லாம் செல்லுபடியாக்கப்படுவதை உறுதிசெய்ய ஒரு வலுவான நிகழ்வு கண்காணிப்பு அமைப்பு அவசியம்.
• நுணுக்கமான செல்லுபடியாக்கம்: முழு கேச்-ஐயும் செல்லுபடியாக்குவதற்குப் பதிலாக, நிகழ்வினால் பாதிக்கப்பட்ட குறிப்பிட்ட கேச் உள்ளீடுகளை மட்டும் செல்லுபடியாக்க முயற்சிக்கவும். இது தேவையற்ற மறு-பெறுதல்களைக் குறைத்து செயல்திறனை மேம்படுத்துகிறது. `queryClient.invalidateQueries` முறை வினவல் விசைகளின் அடிப்படையில் தேர்ந்தெடுத்த செல்லுபடியாக்குதலை அனுமதிக்கிறது.
• நம்பிக்கையான புதுப்பிப்புகள்: பின்னணியில் தரவு புதுப்பிக்கப்படும்போது பயனருக்கு உடனடி பின்னூட்டம் வழங்க நம்பிக்கையான புதுப்பிப்புகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். நம்பிக்கையான புதுப்பிப்புகளுடன், நீங்கள் உடனடியாக UI-ஐப் புதுப்பித்து, சர்வர் பக்க புதுப்பிப்பு தோல்வியுற்றால் மாற்றங்களைத் திரும்பப் பெறுவீர்கள். இது பயனர் அனுபவத்தை மேம்படுத்தும், ஆனால் கவனமான பிழை கையாளுதல் மற்றும் சாத்தியமான சிக்கலான கேச் மேலாண்மை தேவைப்படுகிறது.

3. குறிச்சொல் அடிப்படையிலான செல்லுபடியாக்கம்

குறிச்சொல் அடிப்படையிலான செல்லுபடியாக்கம், கேச் செய்யப்பட்ட தரவுகளுடன் குறிச்சொற்களை இணைக்க உங்களை அனுமதிக்கிறது. தரவு மாறும்போது, குறிப்பிட்ட குறிச்சொற்களுடன் தொடர்புடைய அனைத்து கேச் உள்ளீடுகளையும் நீங்கள் செல்லுபடியாக்கலாம். பல கேச் உள்ளீடுகள் ஒரே அடிப்படைத் தரவைப் பொறுத்து இருக்கும் சூழ்நிலைகளுக்கு இது பயனுள்ளதாக இருக்கும்.

செயல்படுத்துதல்: தரவு மீட்டெடுப்பு நூலகங்கள் குறிச்சொல் அடிப்படையிலான செல்லுபடியாக்குதலுக்கு நேரடி ஆதரவைக் கொண்டிருக்கலாம் அல்லது இல்லாமலும் இருக்கலாம். நூலகத்தின் கேச்சிங் திறன்களுக்கு மேல் உங்கள் சொந்த குறிச்சொல் பொறிமுறையை நீங்கள் செயல்படுத்த வேண்டியிருக்கலாம். உதாரணமாக, குறிச்சொற்களை வினவல் விசைகளுடன் வரைபடமாக்கும் ஒரு தனி தரவுக் கட்டமைப்பை நீங்கள் பராமரிக்கலாம். ஒரு குறிச்சொல் செல்லுபடியாக்கப்பட வேண்டியிருக்கும் போது, தொடர்புடைய வினவல் விசைகள் மூலம் மீண்டும் மீண்டும் சென்று அந்த வினவல்களை செல்லுபடியாக்கலாம்.

உதாரணம் (கருத்தியல்):

// எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டு - உண்மையான செயல்படுத்தல் மாறுபடும்
const tagMap = {
  'products': [['product', 1], ['product', 2], ['product', 3]],
  'categories': [['category', 'electronics'], ['category', 'clothing']],
};

function invalidateByTag(tag) {
  const queryClient = useQueryClient();
  const queryKeys = tagMap[tag];
  if (queryKeys) {
    queryKeys.forEach(key => queryClient.invalidateQueries(key));
  }
}

// ஒரு தயாரிப்பு புதுப்பிக்கப்படும்போது:
invalidateByTag('products');

கருத்தில் கொள்ள வேண்டியவை:

• குறிச்சொல் மேலாண்மை: குறிச்சொல்-க்கு-வினவல் விசை வரைபடத்தை சரியாக நிர்வகிப்பது அவசியம். தொடர்புடைய கேச் உள்ளீடுகளுக்கு குறிச்சொற்கள் சீராகப் பயன்படுத்தப்படுவதை நீங்கள் உறுதி செய்ய வேண்டும். தரவு ஒருமைப்பாட்டைப் பராமரிக்க ஒரு திறமையான குறிச்சொல் மேலாண்மை அமைப்பு அவசியம்.
• சிக்கலானது: குறிச்சொல் அடிப்படையிலான செல்லுபடியாக்கம் உங்கள் செயலிக்கு சிக்கலைச் சேர்க்கலாம், குறிப்பாக உங்களிடம் அதிக எண்ணிக்கையிலான குறிச்சொற்கள் மற்றும் உறவுகள் இருந்தால். செயல்திறன் தடைகள் மற்றும் பராமரிப்பு சிக்கல்களைத் தவிர்க்க உங்கள் குறிச்சொல் உத்தியை கவனமாக வடிவமைப்பது முக்கியம்.
• நூலக ஆதரவு: உங்கள் தரவு மீட்டெடுப்பு நூலகம் குறிச்சொல் அடிப்படையிலான செல்லுபடியாக்குதலுக்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறதா அல்லது நீங்களே அதை செயல்படுத்த வேண்டுமா என்பதை சரிபார்க்கவும். சில நூலகங்கள் குறிச்சொல் அடிப்படையிலான செல்லுபடியாக்குதலை எளிதாக்கும் நீட்டிப்புகள் அல்லது மிடில்வேரை வழங்கக்கூடும்.

4. நிகழ்நேர செல்லுபடியாக்குதலுக்கான சர்வர்-அனுப்பிய நிகழ்வுகள் (SSE) அல்லது WebSockets

நிகழ்நேர தரவு புதுப்பிப்புகள் தேவைப்படும் செயலிகளுக்கு, சர்வரிலிருந்து கிளையன்ட்டிற்கு செல்லுபடியாக்கல் அறிவிப்புகளை அனுப்ப சர்வர்-அனுப்பிய நிகழ்வுகள் (SSE) அல்லது WebSockets பயன்படுத்தப்படலாம். சர்வரில் தரவு மாறும்போது, சர்வர் கிளையன்ட்டிற்கு ஒரு செய்தியை அனுப்புகிறது, இது குறிப்பிட்ட கேச் உள்ளீடுகளை செல்லுபடியாக்க அறிவுறுத்துகிறது.

செயல்படுத்துதல்:

1. ஒரு இணைப்பை ஏற்படுத்துங்கள்: கிளையன்ட் மற்றும் சர்வருக்கு இடையில் ஒரு SSE அல்லது WebSocket இணைப்பை அமைக்கவும்.
2. சர்வர் பக்க தர்க்கம்: சர்வரில் தரவு மாறும்போது, இணைக்கப்பட்ட கிளையன்ட்களுக்கு ஒரு செய்தியை அனுப்பவும். செய்தியில் எந்த கேச் உள்ளீடுகளை செல்லுபடியாக்க வேண்டும் என்பது பற்றிய தகவல்கள் இருக்க வேண்டும் (எ.கா., வினவல் விசைகள் அல்லது குறிச்சொற்கள்).
3. கிளையன்ட் பக்க தர்க்கம்: கிளையன்ட் பக்கத்தில், சர்வரிலிருந்து வரும் செல்லுபடியாக்கல் செய்திகளைக் கேட்டு, தொடர்புடைய கேச் உள்ளீடுகளை செல்லுபடியாக்க தரவு மீட்டெடுப்பு நூலகத்தின் செல்லுபடியாக்கல் முறைகளைப் பயன்படுத்தவும்.

உதாரணம் (SSE ஐப் பயன்படுத்தி கருத்தியல்):

// சர்வர்-பக்கம் (Node.js)
const express = require('express');
const app = express();
const clients = [];

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const clientId = Date.now();
  const newClient = {
    id: clientId,
    res,
  };
  clients.push(newClient);

  req.on('close', () => {
    clients = clients.filter(client => client.id !== clientId);
  });

  res.write('data: connected\n\n');
});

function sendInvalidation(queryKey) {
  clients.forEach(client => {
    client.res.write(`data: ${JSON.stringify({ type: 'invalidate', queryKey: queryKey })}\n\n`);
  });
}

// உதாரணம்: தயாரிப்பு தரவு மாறும்போது:
sendInvalidation(['product', 123]);

app.listen(4000, () => {
  console.log('SSE server listening on port 4000');
});

// கிளையன்ட்-பக்கம் (React)
import { useQueryClient } from 'react-query';
import { useEffect } from 'react';

function App() {
  const queryClient = useQueryClient();

  useEffect(() => {
    const eventSource = new EventSource('/events');

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'invalidate') {
        queryClient.invalidateQueries(data.queryKey);
      }
    };

    eventSource.onerror = (error) => {
      console.error('SSE error:', error);
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, [queryClient]);

  // ... உங்கள் செயலியின் மீதிப் பகுதி
}

கருத்தில் கொள்ள வேண்டியவை:

• அளவிடுதல்: SSE மற்றும் WebSockets வள-தீவிரமானதாக இருக்கலாம், குறிப்பாக அதிக எண்ணிக்கையிலான இணைக்கப்பட்ட கிளையன்ட்களுடன். அளவிடுதல் தாக்கங்களை கவனமாக பரிசீலித்து, அதற்கேற்ப உங்கள் சர்வர் பக்க உள்கட்டமைப்பை மேம்படுத்தவும். சுமை சமநிலை மற்றும் இணைப்புPooling அளவிடுதலை மேம்படுத்த உதவும்.
• நம்பகத்தன்மை: உங்கள் SSE அல்லது WebSocket இணைப்பு நம்பகமானது மற்றும் பிணைய இடையூறுகளுக்கு நெகிழ்வானது என்பதை உறுதிப்படுத்தவும். இணைப்பு இழந்தால் தானாக மீண்டும் இணைப்பை நிறுவ கிளையன்ட் பக்கத்தில் மீண்டும் இணைப்பு தர்க்கத்தை செயல்படுத்தவும்.
• பாதுகாப்பு: அங்கீகரிக்கப்படாத அணுகல் மற்றும் தரவு மீறல்களைத் தடுக்க உங்கள் SSE அல்லது WebSocket முனையத்தைப் பாதுகாக்கவும். அங்கீகரிக்கப்பட்ட கிளையன்ட்கள் மட்டுமே செல்லுபடியாக்கல் அறிவிப்புகளைப் பெற முடியும் என்பதை உறுதிப்படுத்த அங்கீகாரம் மற்றும் அங்கீகார வழிமுறைகளைப் பயன்படுத்தவும்.
• சிக்கலானது: நிகழ்நேர செல்லுபடியாக்குதலை செயல்படுத்துவது உங்கள் செயலிக்கு சிக்கலைச் சேர்க்கிறது. நிகழ்நேர புதுப்பிப்புகளின் நன்மைகளைச் சேர்க்கப்பட்ட சிக்கலான மற்றும் பராமரிப்புச் செலவுகளுக்கு எதிராக கவனமாக எடைபோடவும்.

React Suspense உடன் வள ஆதார செல்லுபடியாக்குதலுக்கான சிறந்த நடைமுறைகள்

React Suspense உடன் வள ஆதார செல்லுபடியாக்குதலை செயல்படுத்தும் போது மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• சரியான உத்தியைத் தேர்வுசெய்க: உங்கள் செயலியின் குறிப்பிட்ட தேவைகள் மற்றும் உங்கள் தரவின் பண்புகளுக்கு மிகவும் பொருத்தமான செல்லுபடியாக்கல் உத்தியைத் தேர்ந்தெடுக்கவும். தரவு நிலையற்ற தன்மை, புதுப்பிப்புகளின் அதிர்வெண் மற்றும் உங்கள் செயலியின் சிக்கலான தன்மையைக் கருத்தில் கொள்ளுங்கள். உங்கள் செயலியின் வெவ்வேறு பகுதிகளுக்கு உத்திகளின் கலவை பொருத்தமானதாக இருக்கலாம்.
• செல்லுபடியாக்கல் வரம்பைக் குறைக்கவும்: தரவு மாற்றங்களால் பாதிக்கப்பட்ட குறிப்பிட்ட கேச் உள்ளீடுகளை மட்டுமே செல்லுபடியாக்க வேண்டும். தேவையற்ற முறையில் முழு கேச்-ஐயும் செல்லுபடியாக்குவதைத் தவிர்க்கவும்.
• செல்லுபடியாக்குதலை Debounce செய்யவும்: பல செல்லுபடியாக்கல் நிகழ்வுகள் விரைவான தொடர்ச்சியாக ஏற்பட்டால், அதிகப்படியான மறு-பெறுதல்களைத் தவிர்க்க செல்லுபடியாக்கல் செயல்முறையை debounce செய்யவும். பயனர் உள்ளீடு அல்லது அடிக்கடி சர்வர் பக்க புதுப்பிப்புகளைக் கையாளும்போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.
• கேச் செயல்திறனைக் கண்காணிக்கவும்: சாத்தியமான தடைகளைக் கண்டறிந்து உங்கள் கேச் செல்லுபடியாக்கல் உத்தியை மேம்படுத்த கேச் வெற்றி விகிதங்கள், மறு-பெறுதல் நேரங்கள் மற்றும் பிற செயல்திறன் அளவீடுகளைக் கண்காணிக்கவும். கண்காணிப்பு உங்கள் கேச்சிங் உத்தியின் செயல்திறன் பற்றிய மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகிறது.
• செல்லுபடியாக்கல் தர்க்கத்தை மையப்படுத்தவும்: குறியீடு பராமரிப்பு மற்றும் நிலைத்தன்மையை மேம்படுத்த உங்கள் செல்லுபடியாக்கல் தர்க்கத்தை மீண்டும் பயன்படுத்தக்கூடிய செயல்பாடுகள் அல்லது தொகுதிகளில் இணைக்கவும். ஒரு மையப்படுத்தப்பட்ட செல்லுபடியாக்கல் அமைப்பு காலப்போக்கில் உங்கள் செல்லுபடியாக்கல் உத்தியை நிர்வகிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது.
• விளிம்பு நிலைகளைக் கருத்தில் கொள்ளுங்கள்: பிணையப் பிழைகள், சர்வர் தோல்விகள் மற்றும் ஒரே நேரத்தில் புதுப்பிப்புகள் போன்ற விளிம்பு நிலைகளைப் பற்றி சிந்தியுங்கள். உங்கள் செயலி நெகிழ்வாக இருப்பதை உறுதிசெய்ய பிழை கையாளுதல் மற்றும் மீண்டும் முயற்சிக்கும் வழிமுறைகளை செயல்படுத்தவும்.
• ஒரு நிலையான கீயிங் உத்தியைப் பயன்படுத்தவும்: உங்கள் எல்லா வினவல்களுக்கும், விசைகளை சீராக உருவாக்குவதற்கும், இந்த விசைகளை ஒரு சீரான மற்றும் கணிக்கக்கூடிய முறையில் செல்லுபடியாக்குவதற்கும் ஒரு வழி இருப்பதை உறுதிப்படுத்தவும்.

உதாரண காட்சி: ஒரு இ-காமர்ஸ் செயலி

இந்த உத்திகள் நடைமுறையில் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை விளக்க ஒரு இ-காமர்ஸ் செயலியைப் பரிசீலிப்போம்.

• தயாரிப்பு பட்டியல்: தயாரிப்பு பட்டியல் தரவு ஒப்பீட்டளவில் நிலையானதாக இருக்கலாம், எனவே ஒரு மிதமான TTL (எ.கா., 1 மணிநேரம்) உடன் நேர அடிப்படையிலான காலாவதி உத்தியைப் பயன்படுத்தலாம்.
• தயாரிப்பு விவரங்கள்: விலைகள் மற்றும் விளக்கங்கள் போன்ற தயாரிப்பு விவரங்கள் அடிக்கடி மாறக்கூடும். ஒரு குறுகிய TTL (எ.கா., 15 நிமிடங்கள்) அல்லது நிகழ்வு அடிப்படையிலான செல்லுபடியாக்கம் பயன்படுத்தப்படலாம். ஒரு தயாரிப்பின் விலை புதுப்பிக்கப்பட்டால், தொடர்புடைய கேச் உள்ளீடு செல்லுபடியாக்கப்பட வேண்டும்.
• ஷாப்பிங் கார்ட்: ஷாப்பிங் கார்ட் தரவு மிகவும் ஆற்றல் வாய்ந்தது மற்றும் பயனர்-குறிப்பிட்டது. நிகழ்வு அடிப்படையிலான செல்லுபடியாக்கம் அவசியம். ஒரு பயனர் தனது கார்ட்டில் பொருட்களைச் சேர்க்கும், அகற்றும் அல்லது புதுப்பிக்கும் போது, கார்ட் தரவு கேச் செல்லுபடியாக்கப்பட வேண்டும்.
• இருப்பு நிலைகள்: இருப்பு நிலைகள் அடிக்கடி மாறக்கூடும், குறிப்பாக உச்ச ஷாப்பிங் பருவங்களில். நிகழ்நேர புதுப்பிப்புகளைப் பெறவும், இருப்பு நிலைகள் மாறும் போதெல்லாம் கேச்-ஐ செல்லுபடியாக்க SSE அல்லது WebSockets ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• வாடிக்கையாளர் மதிப்புரைகள்: வாடிக்கையாளர் மதிப்புரைகள் எப்போதாவது புதுப்பிக்கப்படலாம். ஒரு நீண்ட TTL (எ.கா., 24 மணிநேரம்) உள்ளடக்க மதிப்பீட்டின் மீது ஒரு கைமுறை தூண்டுதலுக்கு கூடுதலாக நியாயமானதாக இருக்கும்.

முடிவுரை

செயல்திறன் மிக்க மற்றும் தரவு-நிலையான React Suspense செயலிகளை உருவாக்குவதற்கு பயனுள்ள கேச் காலாவதி மேலாண்மை முக்கியமானது. வெவ்வேறு செல்லுபடியாக்கல் உத்திகளைப் புரிந்துகொண்டு சிறந்த நடைமுறைகளைப் பயன்படுத்துவதன் மூலம், உங்கள் பயனர்கள் எப்போதும் மிகவும் புதுப்பித்த தகவல்களை அணுகுவதை உறுதிசெய்ய முடியும். உங்கள் செயலியின் குறிப்பிட்ட தேவைகளை கவனமாகக் கருத்தில் கொண்டு, அந்தத் தேவைகளுக்கு மிகவும் பொருத்தமான செல்லுபடியாக்கல் உத்தியைத் தேர்வு செய்யவும். உகந்த கேச் உள்ளமைப்பைக் கண்டுபிடிக்க பரிசோதனை மற்றும் மறுபரிசீலனை செய்ய பயப்பட வேண்டாம். நன்கு வடிவமைக்கப்பட்ட கேச் செல்லுபடியாக்கல் உத்தி மூலம், பயனர் அனுபவத்தையும் உங்கள் React செயலிகளின் ஒட்டுமொத்த செயல்திறனையும் கணிசமாக மேம்படுத்தலாம்.

வள ஆதார செல்லுபடியாக்கம் ஒரு தொடர்ச்சியான செயல்முறை என்பதை நினைவில் கொள்ளுங்கள். உங்கள் செயலி உருவாகும்போது, புதிய அம்சங்கள் மற்றும் மாறும் தரவு வடிவங்களுக்கு இடமளிக்க உங்கள் செல்லுபடியாக்கல் உத்திகளை நீங்கள் சரிசெய்ய வேண்டியிருக்கலாம். ஆரோக்கியமான மற்றும் செயல்திறன்மிக்க கேச்-ஐப் பராமரிக்க தொடர்ச்சியான கண்காணிப்பு மற்றும் மேம்படுத்தல் அவசியம்.