தமிழ்

டைனமிக் பயன்பாடுகளில் செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்த, தரவு கேச்சிங்கில் நுட்பமான கட்டுப்பாட்டிற்கு Next.js unstable_cache API-ஐ ஆராயுங்கள்.

நெக்ஸ்ட்.js இன் unstable_cache: டைனமிக் பயன்பாடுகளுக்கான நுட்பமான கேச்சிங் கட்டுப்பாடு

நெக்ஸ்ட்.js வலைத்தள உருவாக்கத்தில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது, இது செயல்திறன் மிக்க மற்றும் அளவிடக்கூடிய பயன்பாடுகளை உருவாக்குவதற்கான சக்திவாய்ந்த அம்சங்களை வழங்குகிறது. அதன் முக்கிய பலங்களில் ஒன்று அதன் வலுவான கேச்சிங் பொறிமுறையாகும், இது டெவலப்பர்களுக்கு ஒரு மென்மையான பயனர் அனுபவத்திற்காக தரவுப் பெறுதல் மற்றும் ரெண்டரிங் ஆகியவற்றை மேம்படுத்த அனுமதிக்கிறது. நெக்ஸ்ட்.js பல்வேறு கேச்சிங் உத்திகளை வழங்கினாலும், unstable_cache API ஒரு புதிய அளவிலான நுட்பமான கட்டுப்பாட்டை வழங்குகிறது, இது டெவலப்பர்களுக்கு அவர்களின் டைனமிக் பயன்பாடுகளின் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப கேச்சிங் நடத்தையை வடிவமைக்க உதவுகிறது. இந்த கட்டுரை unstable_cache API-ஐ ஆழமாக ஆராய்கிறது, அதன் திறன்கள், நன்மைகள் மற்றும் நடைமுறை பயன்பாடுகளை ஆராய்கிறது.

நெக்ஸ்ட்.js இல் கேச்சிங்கைப் புரிந்துகொள்ளுதல்

unstable_cache-க்குள் மூழ்குவதற்கு முன், நெக்ஸ்ட்.js இல் உள்ள வெவ்வேறு கேச்சிங் அடுக்குகளைப் புரிந்துகொள்வது அவசியம். செயல்திறனை மேம்படுத்த நெக்ஸ்ட்.js பல கேச்சிங் பொறிமுறைகளைப் பயன்படுத்துகிறது:

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

`unstable_cache` API-ஐ அறிமுகப்படுத்துதல்

நெக்ஸ்ட்.js இல் உள்ள unstable_cache API, டெவலப்பர்களுக்கு தனிப்பட்ட தரவுப் பெறும் செயல்பாடுகளுக்கு தனிப்பயன் கேச்சிங் உத்திகளை வரையறுக்க அனுமதிக்கிறது. இது பின்வருவனவற்றில் நுட்பமான கட்டுப்பாட்டை வழங்குகிறது:

இந்த API "unstable" என்று கருதப்படுகிறது, ஏனெனில் இது இன்னும் உருவாக்கத்தில் உள்ளது மற்றும் எதிர்கால நெக்ஸ்ட்.js பதிப்புகளில் மாற்றங்களுக்கு உள்ளாகலாம். இருப்பினும், இது மேம்பட்ட கேச்சிங் சூழ்நிலைகளுக்கு மதிப்புமிக்க செயல்பாட்டை வழங்குகிறது.

`unstable_cache` எப்படி வேலை செய்கிறது

unstable_cache செயல்பாடு இரண்டு முக்கிய ஆர்குமென்ட்களை எடுக்கிறது:

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

unstable_cache-ஐ எப்படிப் பயன்படுத்துவது என்பதற்கான ஒரு அடிப்படை உதாரணம் இங்கே:

import { unstable_cache } from 'next/cache';

async function getData(id: string) {
  return unstable_cache(
    async () => {
      // ஒரு API இலிருந்து தரவைப் பெறுவதை உருவகப்படுத்துதல்
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { id: id, value: `Data for ID ${id}` };
      return data;
    },
    ["data", id],
    { tags: ["data", `item:${id}`] }
  )();
}

export default async function Page({ params }: { params: { id: string } }) {
  const data = await getData(params.id);
  return 
{data.value}
; }

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

`unstable_cache`-இன் முக்கிய அம்சங்கள் மற்றும் விருப்பங்கள்

1. வாழும் நேரம் (Time-to-Live - TTL)

revalidate விருப்பம் (முந்தைய பரிசோதனை பதிப்புகளில் ttl) கேச் செய்யப்பட்ட தரவு செல்லுபடியாகும் எனக் கருதப்படும் அதிகபட்ச நேரத்தை (வினாடிகளில்) குறிப்பிடுகிறது. இந்த நேரத்திற்குப் பிறகு, அடுத்த கோரிக்கையின் போது கேச் மறுமதிப்பீடு செய்யப்படுகிறது.

import { unstable_cache } from 'next/cache';

async function getData(id: string) {
  return unstable_cache(
    async () => {
      // ஒரு API இலிருந்து தரவைப் பெறுவதை உருவகப்படுத்துதல்
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { id: id, value: `Data for ID ${id}` };
      return data;
    },
    ["data", id],
    { tags: ["data", `item:${id}`], revalidate: 60 } // 60 வினாடிகளுக்கு கேச் செய்யவும்
  )();
}

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

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

2. கேச் டேக்குகள் (Cache Tags)

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

import { unstable_cache, revalidateTag } from 'next/cache';

async function getProduct(id: string) {
  return unstable_cache(
    async () => {
      // ஒரு API இலிருந்து தயாரிப்புத் தரவைப் பெறுவதை உருவகப்படுத்துதல்
      await new Promise((resolve) => setTimeout(resolve, 500));
      const product = { id: id, name: `Product ${id}`, price: Math.random() * 100 };
      return product;
    },
    ["product", id],
    { tags: ["products", `product:${id}`] }
  )();
}

async function getCategoryProducts(category: string) {
  return unstable_cache(
    async () => {
      // ஒரு API இலிருந்து வகை வாரியாக தயாரிப்புகளைப் பெறுவதை உருவகப்படுத்துதல்
      await new Promise((resolve) => setTimeout(resolve, 500));
      const products = Array.from({ length: 3 }, (_, i) => ({ id: `${category}-${i}`, name: `Product ${category}-${i}`, price: Math.random() * 100 }));
      return products;
    },
    ["categoryProducts", category],
    { tags: ["products", `category:${category}`] }
  )();
}

// எல்லா தயாரிப்புகள் மற்றும் ஒரு குறிப்பிட்ட தயாரிப்புக்கான கேச்சை செல்லாததாக்குங்கள்
async function updateProduct(id: string, newPrice: number) {
  // தரவுத்தளத்தில் தயாரிப்பை புதுப்பிப்பதை உருவகப்படுத்துதல்
  await new Promise((resolve) => setTimeout(resolve, 500));

  // தயாரிப்பு மற்றும் தயாரிப்புகளின் வகைக்கான கேச்சை செல்லாததாக்குங்கள்
  revalidateTag("products");
  revalidateTag(`product:${id}`);

  return { success: true };
}

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

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

3. கேச் கீ உருவாக்கம் (Cache Key Generation)

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

import { unstable_cache } from 'next/cache';

async function getData(userId: string, sortBy: string) {
  return unstable_cache(
    async () => {
      // ஒரு API இலிருந்து தரவைப் பெறுவதை உருவகப்படுத்துதல்
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const data = { userId: userId, sortBy: sortBy, value: `Data for user ${userId}, sorted by ${sortBy}` };
      return data;
    },
    [userId, sortBy],
    { tags: ["user-data", `user:${userId}`] }
  )();
}

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

உலகளாவிய கருத்தில்: உங்கள் கேச் கீ உருவாக்கும் உத்தி சீரானது மற்றும் தரவைப் பாதிக்கும் அனைத்து தொடர்புடைய காரணிகளையும் கணக்கில் எடுத்துக்கொள்கிறது என்பதை உறுதிப்படுத்தவும். சிக்கலான தரவுக் கட்டமைப்புகளிலிருந்து ஒரு தனித்துவமான கீயை உருவாக்க ஒரு ஹாஷிங் செயல்பாட்டைப் பயன்படுத்துவதைக் கவனியுங்கள்.

4. கைமுறை மறுமதிப்பீடு (Manual Revalidation)

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

import { revalidateTag } from 'next/cache';

async function handleWebhook(payload: any) {
  // வெப்ஹூக் பேலோடைச் செயல்படுத்தவும்

  // தொடர்புடைய தரவிற்கான கேச்சை செல்லாததாக்குங்கள்
  revalidateTag("products");
  revalidateTag(`product:${payload.productId}`);
}

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

`unstable_cache`-இன் நடைமுறை பயன்பாட்டு வழக்குகள்

1. அடிக்கடி புதுப்பிக்கப்படாத டைனமிக் உள்ளடக்கம்

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

2. பயனருக்குரிய தரவு

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

3. காலாவதியான தரவுகளுக்கு சகிப்புத்தன்மையுடன் கூடிய நிகழ்நேரத் தரவு

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

4. A/B சோதனை

A/B சோதனையின் போது, ஒரு பயனருக்கு ஒதுக்கப்பட்ட பரிசோதனை மாறுபாட்டைக் கேச் செய்வது சீரான அனுபவத்தை உறுதிசெய்ய முக்கியம். கேச் கீயின் ஒரு பகுதியாக பயனரின் ஐடியைப் பயன்படுத்தி தேர்ந்தெடுக்கப்பட்ட மாறுபாட்டைக் கேச் செய்ய `unstable_cache` பயன்படுத்தப்படலாம்.

`unstable_cache`-ஐப் பயன்படுத்துவதன் நன்மைகள்

கவனிக்க வேண்டியவை மற்றும் சிறந்த நடைமுறைகள்

`unstable_cache` vs. `fetch` API கேச்சிங்

நெக்ஸ்ட்.js, fetch API மூலம் உள்ளமைக்கப்பட்ட கேச்சிங் திறன்களையும் வழங்குகிறது. இயல்பாக, நெக்ஸ்ட்.js தானாகவே fetch கோரிக்கைகளின் முடிவுகளை கேச் செய்கிறது. இருப்பினும், unstable_cache ஆனது fetch API கேச்சிங்கை விட அதிக நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது.

இரண்டு அணுகுமுறைகளின் ஒப்பீடு இங்கே:

அம்சம் `unstable_cache` `fetch` API
TTL மீதான கட்டுப்பாடு revalidate விருப்பத்துடன் வெளிப்படையாக உள்ளமைக்கக்கூடியது. நெக்ஸ்ட்.js ஆல் மறைமுகமாக நிர்வகிக்கப்படுகிறது, ஆனால் fetch விருப்பங்களில் revalidate விருப்பத்துடன் பாதிக்கப்படலாம்.
கேச் டேக்குகள் தொடர்புடைய தரவை செல்லாததாக்குவதற்கு கேச் டேக்குகளை ஆதரிக்கிறது. கேச் டேக்குகளுக்கு உள்ளமைக்கப்பட்ட ஆதரவு இல்லை.
கேச் கீ தனிப்பயனாக்கம் கீயை உருவாக்கப் பயன்படுத்தப்படும் மதிப்புகளின் வரிசையுடன் கேச் கீயைத் தனிப்பயனாக்க அனுமதிக்கிறது. வரையறுக்கப்பட்ட தனிப்பயனாக்க விருப்பங்கள். கீ fetch URL இலிருந்து பெறப்படுகிறது.
கைமுறை மறுமதிப்பீடு revalidateTag உடன் கைமுறை மறுமதிப்பீட்டை ஆதரிக்கிறது. கைமுறை மறுமதிப்பீட்டிற்கு வரையறுக்கப்பட்ட ஆதரவு.
கேச்சிங்கின் நுணுக்கம் தனிப்பட்ட தரவுப் பெறும் செயல்பாடுகளை கேச் செய்ய அனுமதிக்கிறது. முதன்மையாக HTTP பதில்களை கேச் செய்வதில் கவனம் செலுத்துகிறது.

பொதுவாக, இயல்புநிலை கேச்சிங் நடத்தை போதுமானதாக இருக்கும் எளிய தரவுப் பெறும் சூழ்நிலைகளுக்கு fetch API கேச்சிங்கைப் பயன்படுத்தவும். கேச்சிங் நடத்தை மீது நுட்பமான கட்டுப்பாடு தேவைப்படும் மிகவும் சிக்கலான சூழ்நிலைகளுக்கு unstable_cache-ஐப் பயன்படுத்தவும்.

நெக்ஸ்ட்.js இல் கேச்சிங்கின் எதிர்காலம்

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

முடிவுரை

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