ரியாக்ட் experimental_useCache: மேம்பட்ட செயல்திறனுக்கான கிளையன்ட்-சைட் கேச்சிங்கில் தேர்ச்சி பெறுதல்

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

கிளையன்ட்-சைட் கேச்சிங்கைப் புரிந்துகொள்ளுதல்

experimental_useCache இன் பிரத்யேக அம்சங்களுக்குள் செல்வதற்கு முன், கிளையன்ட்-சைட் கேச்சிங் மற்றும் வலை மேம்பாட்டில் அதன் முக்கியத்துவம் குறித்த உறுதியான புரிதலை ஏற்படுத்துவோம்.

கிளையன்ட்-சைட் கேச்சிங் என்றால் என்ன?

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

கிளையன்ட்-சைட் கேச்சிங்கின் நன்மைகள்

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

ரியாக்ட் experimental_useCache அறிமுகம்

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

experimental_useCache இன் முக்கிய அம்சங்கள் மற்றும் நன்மைகள்

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

experimental_useCache எவ்வாறு செயல்படுகிறது

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

experimental_useCache இன் அடிப்படை பயன்பாடு

ஒரு API இலிருந்து பயனர் தரவைப் பெறுவதற்கான ஒரு எளிய எடுத்துக்காட்டுடன் experimental_useCache இன் அடிப்படை பயன்பாட்டை விளக்குவோம்:

import { experimental_useCache as useCache } from 'react';

async function fetchUserData(userId: string): Promise<{ id: string; name: string }> {
  // Simulate an API call
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate latency
  return { id: userId, name: `User ${userId}` };
}

function UserProfile({ userId }: { userId: string }) {
  const userData = useCache(fetchUserData, userId);

  if (!userData) {
    return <p>பயனர் தரவு ஏற்றப்படுகிறது...</p>;
  }

  return (
    <div>
      <h2>பயனர் சுயவிவரம்</h2>
      <p><strong>ID:</strong> {userData.id}</p>
      <p><strong>பெயர்:</strong> {userData.name}</p>
    </div>
  );
}

export default UserProfile;

இந்த எடுத்துக்காட்டில்:

• நாம் react தொகுப்பிலிருந்து experimental_useCache ஐ இறக்குமதி செய்கிறோம்.
• API இலிருந்து பயனர் தரவைப் பெறுவதை உருவகப்படுத்தும் (செயற்கை தாமதத்துடன்) ஒரு ஒத்திசைவற்ற செயல்பாடான fetchUserData ஐ வரையறுக்கிறோம்.
• UserProfile கூறில், userId ப்ராப்பின் அடிப்படையில் பயனர் தரவைப் பெற்று கேச் செய்ய useCache ஐப் பயன்படுத்துகிறோம்.
• ஒரு குறிப்பிட்ட userId உடன் கூறு முதல் முறையாக ரெண்டர் செய்யப்படும்போது, fetchUserData அழைக்கப்படும். அதே userId உடன் அடுத்தடுத்த ரெண்டர்கள் கேச்சிலிருந்து தரவை மீட்டெடுக்கும், மற்றொரு API அழைப்பைத் தவிர்க்கும்.

மேம்பட்ட பயன்பாட்டு வழக்குகள் மற்றும் பரிசீலனைகள்

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

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

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

தரவு மாற்றங்களை கேச் செய்தல்

பெரும்பாலும், ஒரு API இலிருந்து பெறப்பட்ட தரவை ரெண்டர் செய்வதற்கு முன்பு அதை மாற்ற வேண்டியிருக்கும். experimental_useCache மாற்றப்பட்ட தரவை கேச் செய்ய பயன்படுத்தப்படலாம், அடுத்தடுத்த ரெண்டர்களில் தேவையற்ற மாற்றங்களைத் தடுக்கிறது. எடுத்துக்காட்டாக:

import { experimental_useCache as useCache } from 'react';

async function fetchProducts(): Promise<{ id: string; name: string; price: number }[]> {
  // Simulate fetching products from an API
  await new Promise(resolve => setTimeout(resolve, 300));
  return [
    { id: '1', name: 'Product A', price: 20 },
    { id: '2', name: 'Product B', price: 30 },
  ];
}

function formatCurrency(price: number, currency: string = 'USD'): string {
  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price);
}

function ProductList() {
  const products = useCache(fetchProducts);

  const formattedProducts = useCache(
    (prods: { id: string; name: string; price: number }[]) => {
      return prods.map(product => ({
        ...product,
        formattedPrice: formatCurrency(product.price),
      }));
    },
    products || [] // Pass products as an argument
  );

  if (!formattedProducts) {
    return <p>தயாரிப்புகள் ஏற்றப்படுகின்றன...</p>;
  }

  return (
    <ul>
      {formattedProducts.map(product => (
        <li key={product.id}>
          <strong>{product.name}</strong> - {product.formattedPrice}
        </li>
      ))}
    </ul>
  );
}

export default ProductList;

இந்த எடுத்துக்காட்டில், நாம் தயாரிப்புகளின் பட்டியலைப் பெற்று, பின்னர் ஒவ்வொரு தயாரிப்பின் விலையையும் formatCurrency செயல்பாட்டைப் பயன்படுத்தி வடிவமைக்கிறோம். மூல தயாரிப்புத் தரவு மற்றும் வடிவமைக்கப்பட்ட தயாரிப்புத் தரவு ஆகிய இரண்டையும் கேச் செய்ய useCache ஐப் பயன்படுத்துகிறோம், தேவையற்ற API அழைப்புகள் மற்றும் விலை வடிவமைப்பைத் தடுக்கிறோம்.

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

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

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

பிழை கையாளுதல்

தரவு மீட்டெடுப்புடன் experimental_useCache ஐப் பயன்படுத்தும்போது, சாத்தியமான பிழைகளை நளினமாகக் கையாள்வது அவசியம். தரவு மீட்டெடுப்பின் போது ஏற்படும் எந்தப் பிழைகளையும் பிடிக்க மற்றும் பயனருக்கு பொருத்தமான பிழைச் செய்தியைக் காண்பிக்க நீங்கள் try...catch தொகுதியைப் பயன்படுத்தலாம். `fetchUserData` அல்லது அது போன்ற செயல்பாடுகளை try/catch உடன் இணைப்பதைக் கருத்தில் கொள்ளுங்கள்.

ரியாக்ட் சர்வர் கூறுகளுடன் (RSC) ஒருங்கிணைப்பு

ரியாக்ட் சர்வர் கூறுகளுக்குள் (RSC) பயன்படுத்தும்போது experimental_useCache பிரகாசிக்கிறது. RSC-கள் சேவையகத்தில் இயங்குகின்றன, இது தரவைப் பெற்று, கிளையண்டிற்கு அனுப்புவதற்கு முன்பு கூறுகளை ரெண்டர் செய்ய உங்களை அனுமதிக்கிறது. RSC-களில் experimental_useCache ஐப் பயன்படுத்துவதன் மூலம், சேவையகத்தில் தரவு மீட்டெடுப்பு செயல்பாடுகளின் முடிவுகளை நீங்கள் கேச் செய்யலாம், இது உங்கள் பயன்பாட்டின் செயல்திறனை கணிசமாக மேம்படுத்துகிறது. முடிவுகளை கிளையண்டிற்கு ஸ்ட்ரீம் செய்யலாம்.

ஒரு RSC-யில் experimental_useCache ஐப் பயன்படுத்துவதற்கான ஒரு எடுத்துக்காட்டு இங்கே:

// app/components/ServerComponent.tsx (This is an RSC)
import { experimental_useCache as useCache } from 'react';
import { cookies } from 'next/headers'

async function getSessionData() {
  // Simulate reading session from a database or external service
  const cookieStore = cookies()
  const token = cookieStore.get('sessionToken')

  await new Promise((resolve) => setTimeout(resolve, 100));
  return { user: 'authenticatedUser', token: token?.value };
}

export default async function ServerComponent() {
  const session = await useCache(getSessionData);

  return (
    <div>
      <h2>சர்வர் கூறு</h2>
      <p>பயனர்: {session?.user}</p>
      <p>அமர்வு டோக்கன்: {session?.token}</p>
    </div>
  );
}

இந்த எடுத்துக்காட்டில், getSessionData செயல்பாடு சர்வர் கூறுக்குள் அழைக்கப்பட்டு அதன் முடிவு useCache ஐப் பயன்படுத்தி கேச் செய்யப்படுகிறது. அடுத்தடுத்த கோரிக்கைகள் கேச் செய்யப்பட்ட அமர்வுத் தரவைப் பயன்படுத்தும், சேவையகத்தின் சுமையைக் குறைக்கும். கூறின் மீதே `async` முக்கிய சொல்லைக் கவனியுங்கள்.

செயல்திறன் பரிசீலனைகள் மற்றும் சமரசங்கள்

experimental_useCache குறிப்பிடத்தக்க செயல்திறன் நன்மைகளை வழங்கினாலும், சாத்தியமான சமரசங்களைப் பற்றி எச்சரிக்கையாக இருப்பது முக்கியம்:

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

experimental_useCache ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

experimental_useCache இன் நன்மைகளை அதிகரிக்கவும் சாத்தியமான குறைபாடுகளைக் குறைக்கவும், இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

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

experimental_useCache க்கான மாற்று வழிகள்

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

• மெமோயிசேஷன் நுட்பங்கள் (useMemo, useCallback): இந்த ஹூக்குகள் விலையுயர்ந்த கணக்கீடுகள் அல்லது செயல்பாட்டு அழைப்புகளின் முடிவுகளை மெமோயிஸ் செய்யப் பயன்படுத்தப்படலாம். இருப்பினும், அவை தானியங்கி கேச் செல்லுபடியற்றதாக்குதல் அல்லது நிலைத்தன்மையை வழங்காது.
• மூன்றாம் தரப்பு கேச்சிங் நூலகங்கள்: TanStack Query (React Query) மற்றும் SWR போன்ற நூலகங்கள் தானியங்கி கேச் செல்லுபடியற்றதாக்குதல், பின்னணி தரவு மீட்டெடுப்பு மற்றும் சேவையக-நிலை ஒத்திசைவு உள்ளிட்ட விரிவான கேச்சிங் தீர்வுகளை வழங்குகின்றன.
• உலாவி சேமிப்பகம் (LocalStorage, SessionStorage): இந்த API-கள் உலாவியில் நேரடியாக தரவைச் சேமிக்கப் பயன்படுத்தப்படலாம். இருப்பினும், அவை சிக்கலான தரவுக் கட்டமைப்புகளை கேச் செய்வதற்கோ அல்லது கேச் செல்லுபடியற்றதாக்குதலை நிர்வகிப்பதற்கோ வடிவமைக்கப்படவில்லை.
• IndexedDB: ஒரு வலுவான கிளையன்ட்-சைட் தரவுத்தளம், இது பெரிய அளவிலான கட்டமைக்கப்பட்ட தரவைச் சேமிக்க உங்களை அனுமதிக்கிறது. இது ஆஃப்லைன் திறன்கள் மற்றும் சிக்கலான கேச்சிங் சூழ்நிலைகளுக்கு ஏற்றது.

experimental_useCache பயன்பாட்டின் நிஜ உலக எடுத்துக்காட்டுகள்

experimental_useCache திறம்பட பயன்படுத்தக்கூடிய சில நிஜ உலக சூழ்நிலைகளை ஆராய்வோம்:

• இ-காமர்ஸ் பயன்பாடுகள்: பக்க ஏற்றுதல் நேரங்களை மேம்படுத்தவும் சேவையகச் சுமையைக் குறைக்கவும் தயாரிப்பு விவரங்கள், வகை பட்டியல்கள் மற்றும் தேடல் முடிவுகளை கேச் செய்தல்.
• சமூக ஊடக தளங்கள்: பயனர் அனுபவத்தை மேம்படுத்தவும் API அழைப்புகளின் எண்ணிக்கையைக் குறைக்கவும் பயனர் சுயவிவரங்கள், செய்தி ஓடைகள் மற்றும் கருத்து நூல்களை கேச் செய்தல்.
• உள்ளடக்க மேலாண்மை அமைப்புகள் (CMS): வலைத்தள செயல்திறனை மேம்படுத்த கட்டுரைகள், வலைப்பதிவு இடுகைகள் மற்றும் படங்கள் போன்ற அடிக்கடி அணுகப்படும் உள்ளடக்கத்தை கேச் செய்தல்.
• தரவு காட்சிப்படுத்தல் டாஷ்போர்டுகள்: டாஷ்போர்டுகளின் பதிலளிப்புத் திறனை மேம்படுத்த சிக்கலான தரவுத் திரட்டுகள் மற்றும் கணக்கீடுகளின் முடிவுகளை கேச் செய்தல்.

எடுத்துக்காட்டு: பயனர் விருப்பத்தேர்வுகளை கேச் செய்தல்

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

import { experimental_useCache as useCache } from 'react';

async function fetchUserPreferences(userId: string): Promise<{
  theme: string;
  language: string;
  notificationsEnabled: boolean;
}> {
  // Simulate fetching user preferences from an API
  await new Promise(resolve => setTimeout(resolve, 200));
  return {
    theme: 'light',
    language: 'en',
    notificationsEnabled: true,
  };
}

function UserPreferences({ userId }: { userId: string }) {
  const preferences = useCache(fetchUserPreferences, userId);

  if (!preferences) {
    return <p>விருப்பத்தேர்வுகள் ஏற்றப்படுகின்றன...</p>;
  }

  return (
    <div>
      <h2>பயனர் விருப்பத்தேர்வுகள்</h2>
      <p><strong>தீம்:</strong> {preferences.theme}</p>
      <p><strong>மொழி:</strong> {preferences.language}</p>
      <p><strong>அறிவிப்புகள் இயக்கப்பட்டன:</strong> {preferences.notificationsEnabled ? 'ஆம்' : 'இல்லை'}</p>
    </div>
  );
}

export default UserPreferences;

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

முடிவுரை

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

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