ரியாக்ட் சஸ்பென்ஸ்: நவீன பயன்பாடுகளுக்கான தரவு மீட்டெடுப்பு உத்திகள்

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

ரியாக்ட் சஸ்பென்ஸைப் புரிந்துகொள்வது

குறிப்பிட்ட உத்திகளுக்குள் நுழைவதற்கு முன், ரியாக்ட் சஸ்பென்ஸின் முக்கியக் கருத்துக்களைப் புரிந்துகொள்வோம்:

• சஸ்பென்ஸ் எல்லை (Suspense Boundary): ஒரு <Suspense> காம்போனென்ட் ஒரு எல்லையாகச் செயல்படுகிறது, இது இடைநிறுத்தப்படக்கூடிய காம்போனென்ட்டுகளைச் சுற்றி வருகிறது. இது ஒரு fallback ப்ராப்பைக் குறிப்பிடுகிறது, இது சுற்றப்பட்ட காம்போனென்ட்கள் தரவிற்காகக் காத்திருக்கும்போது ஒரு பதிலி UI-ஐ (எ.கா., ஒரு லோடிங் ஸ்பின்னர்) ரெண்டர் செய்கிறது.
• தரவு மீட்டெடுப்புடன் சஸ்பென்ஸ் ஒருங்கிணைப்பு: சஸ்பென்ஸ் நெறிமுறையை ஆதரிக்கும் லைப்ரரிகளுடன் சஸ்பென்ஸ் தடையின்றி செயல்படுகிறது. தரவு இன்னும் கிடைக்காதபோது இந்த லைப்ரரிகள் பொதுவாக ஒரு ப்ராமிஸை (promise) வீசுகின்றன. ரியாக்ட் இந்த ப்ராமிஸைப் பிடித்து, அது தீர்க்கப்படும் வரை ரெண்டரிங்கை இடைநிறுத்துகிறது.
• விளக்க அணுகுமுறை (Declarative Approach): லோடிங் கொடிகளை கைமுறையாக நிர்வகித்தல் மற்றும் நிபந்தனைக்குட்பட்ட ரெண்டரிங்கிற்குப் பதிலாக, தரவு கிடைப்பதன் அடிப்படையில் விரும்பிய UI-ஐ விவரிக்க சஸ்பென்ஸ் உங்களை அனுமதிக்கிறது.

சஸ்பென்ஸுடன் தரவு மீட்டெடுப்பு உத்திகள்

ரியாக்ட் சஸ்பென்ஸைப் பயன்படுத்தி பல பயனுள்ள தரவு மீட்டெடுப்பு உத்திகள் இங்கே உள்ளன:

1. காம்போனென்ட்-நிலை தரவு மீட்டெடுப்பு

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

எடுத்துக்காட்டு:

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

// ஒரு எளிய தரவு மீட்டெடுப்புப் பயன்பாடு (உங்களுக்கு விருப்பமான லைப்ரரியுடன் மாற்றவும்)
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! Status: ${res.status}`);
      }
      return res.json();
    })
    .then(
      res => {
        status = 'success';
        result = res;
      },
      err => {
        status = 'error';
        result = err;
      }
    );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    }
  };
};

const userResource = fetchData('/api/user/123');

function UserProfile() {
  const user = userResource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

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

விளக்கம்:

• fetchData செயல்பாடு ஒரு ஒத்திசைவற்ற API அழைப்பை உருவகப்படுத்துகிறது. முக்கியமாக, தரவு ஏற்றப்படும்போது அது *ஒரு ப்ராமிஸை வீசுகிறது*. இது சஸ்பென்ஸ் வேலை செய்வதற்கு முக்கியமானது.
• UserProfile காம்போனென்ட் userResource.read() ஐப் பயன்படுத்துகிறது, இது பயனர் தரவை உடனடியாகத் தருகிறது அல்லது நிலுவையில் உள்ள ப்ராமிஸை வீசுகிறது.
• <Suspense> காம்போனென்ட் UserProfile-ஐச் சுற்றி, ப்ராமிஸ் தீர்க்கப்படும்போது ஃபால்பேக் UI-ஐக் காட்டுகிறது.

நன்மைகள்:

• செயல்படுத்த எளிமையானது மற்றும் இலகுவானது.
• சுயாதீனமான தரவு சார்புநிலைகளைக் கொண்ட காம்போனென்ட்களுக்கு நல்லது.

குறைபாடுகள்:

• காம்போனென்ட்கள் ஒன்றையொன்று சார்ந்து தரவுகளைப் பெற்றால் "நீர்வீழ்ச்சி" (waterfall) மீட்டெடுப்பிற்கு வழிவகுக்கும்.
• சிக்கலான தரவு சார்புநிலைகளுக்கு ஏற்றதல்ல.

2. இணை தரவு மீட்டெடுப்பு (Parallel Data Fetching)

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

எடுத்துக்காட்டு:

const userResource = fetchData('/api/user/123');
const postsResource = fetchData('/api/user/123/posts');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Posts:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

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

விளக்கம்:

• userResource மற்றும் postsResource இரண்டும் உடனடியாக உருவாக்கப்பட்டு, தரவு மீட்டெடுப்புகளை இணையாகத் தூண்டுகின்றன.
• UserProfile காம்போனென்ட் இரண்டு வளங்களையும் படிக்கிறது. ரெண்டர் செய்வதற்கு முன், சஸ்பென்ஸ் *இரண்டும்* தீர்க்கப்படும் வரை காத்திருக்கும்.

நன்மைகள்:

• தரவை ஒரே நேரத்தில் பெறுவதன் மூலம் ஒட்டுமொத்த லோடிங் நேரத்தைக் குறைக்கிறது.
• நீர்வீழ்ச்சி மீட்டெடுப்புடன் ஒப்பிடும்போது மேம்பட்ட செயல்திறன்.

குறைபாடுகள்:

• சில காம்போனென்ட்களுக்கு எல்லாத் தரவும் தேவையில்லை என்றால், தேவையற்ற தரவு மீட்டெடுப்பிற்கு வழிவகுக்கும்.
• பிழை கையாளுதல் மிகவும் சிக்கலானதாகிறது (தனிப்பட்ட கோரிக்கைகளின் தோல்விகளைக் கையாளுதல்).

3. தேர்ந்தெடுத்த ஹைட்ரேஷன் (சர்வர்-சைட் ரெண்டரிங் - SSR-க்கு)

சர்வர்-சைட் ரெண்டரிங் (SSR) பயன்படுத்தும்போது, பக்கத்தின் பகுதிகளைத் தேர்ந்தெடுத்து ஹைட்ரேட் செய்ய சஸ்பென்ஸ் பயன்படுத்தப்படலாம். இதன் பொருள், பக்கத்தின் மிக முக்கியமான பகுதிகளை முதலில் ஹைட்ரேட் செய்வதற்கு நீங்கள் முன்னுரிமை அளிக்கலாம், இது Time to Interactive (TTI) மற்றும் உணரப்பட்ட செயல்திறனை மேம்படுத்துகிறது. குறைவான முக்கியமான காம்போனென்ட்களின் ஹைட்ரேஷனைத் தள்ளிவைத்து, அடிப்படை லேஅவுட் அல்லது முக்கிய உள்ளடக்கத்தை முடிந்தவரை விரைவாகக் காட்ட விரும்பும் சூழ்நிலைகளில் இது பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு (கருத்தியல்):

// சர்வர்-பக்கம்:
<Suspense fallback={<div>முக்கிய உள்ளடக்கம் ஏற்றப்படுகிறது...</div>}>
  <CriticalContent />
</Suspense>
<Suspense fallback={<div>விருப்ப உள்ளடக்கம் ஏற்றப்படுகிறது...</div>}>
  <OptionalContent />
</Suspense>

விளக்கம்:

• CriticalContent காம்போனென்ட் ஒரு சஸ்பென்ஸ் எல்லையில் சுற்றப்பட்டுள்ளது. சர்வர் இந்த உள்ளடக்கத்தை முழுமையாக ரெண்டர் செய்யும்.
• OptionalContent காம்போனென்ட்டும் ஒரு சஸ்பென்ஸ் எல்லையில் சுற்றப்பட்டுள்ளது. சர்வர் இதை ரெண்டர் *செய்யலாம்*, ஆனால் ரியாக்ட் இதை பின்னர் ஸ்ட்ரீம் செய்யத் தேர்வுசெய்யலாம்.
• கிளையன்ட் பக்கத்தில், ரியாக்ட் முதலில் CriticalContent-ஐ ஹைட்ரேட் செய்யும், இதனால் முக்கியப் பக்கம் விரைவாக ஊடாடக்கூடியதாக மாறும். OptionalContent பின்னர் ஹைட்ரேட் செய்யப்படும்.

நன்மைகள்:

• SSR பயன்பாடுகளுக்கு மேம்பட்ட TTI மற்றும் உணரப்பட்ட செயல்திறன்.
• முக்கியமான உள்ளடக்கத்தின் ஹைட்ரேஷனுக்கு முன்னுரிமை அளிக்கிறது.

குறைபாடுகள்:

• உள்ளடக்க முன்னுரிமையைத் கவனமாகத் திட்டமிட வேண்டும்.
• SSR அமைப்பில் சிக்கலைச் சேர்க்கிறது.

4. சஸ்பென்ஸ் ஆதரவுடன் தரவு மீட்டெடுப்பு லைப்ரரிகள்

பல பிரபலமான தரவு மீட்டெடுப்பு லைப்ரரிகளில் ரியாக்ட் சஸ்பென்ஸிற்கான உள்ளமைக்கப்பட்ட ஆதரவு உள்ளது. இந்த லைப்ரரிகள் பெரும்பாலும் தரவை மீட்டெடுக்கவும் சஸ்பென்ஸுடன் ஒருங்கிணைக்கவும் மிகவும் வசதியான மற்றும் திறமையான வழியை வழங்குகின்றன. சில குறிப்பிடத்தக்க எடுத்துக்காட்டுகள்:

• Relay: தரவு-சார்ந்த ரியாக்ட் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு தரவு-மீட்டெடுப்பு கட்டமைப்பு. இது குறிப்பாக GraphQL-க்காக வடிவமைக்கப்பட்டுள்ளது மற்றும் சிறந்த சஸ்பென்ஸ் ஒருங்கிணைப்பை வழங்குகிறது.
• SWR (Stale-While-Revalidate): ரிமோட் தரவு மீட்டெடுப்பிற்கான ஒரு ரியாக்ட் ஹூக்ஸ் லைப்ரரி. SWR சஸ்பென்ஸிற்கான உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறது மற்றும் தானியங்கி மறுமதிப்பீடு மற்றும் கேச்சிங் போன்ற அம்சங்களை வழங்குகிறது.
• React Query: தரவு மீட்டெடுப்பு, கேச்சிங் மற்றும் ஸ்டேட் மேனேஜ்மென்ட்டிற்கான மற்றொரு பிரபலமான ரியாக்ட் ஹூக்ஸ் லைப்ரரி. ரியாக்ட் குவெரி சஸ்பென்ஸை ஆதரிக்கிறது மற்றும் பின்னணி ரிஃபெட்சிங் மற்றும் பிழை மறு முயற்சிகள் போன்ற அம்சங்களை வழங்குகிறது.

எடுத்துக்காட்டு (SWR பயன்படுத்தி):

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function UserProfile() {
  const { data: user, error } = useSWR('/api/user/123', fetcher, { suspense: true })

  if (error) return <div>ஏற்றுவதில் தோல்வி</div>
  if (!user) return <div>ஏற்றுகிறது...</div> // இது சஸ்பென்ஸுடன் ஒருபோதும் ரெண்டர் செய்யப்படாது

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  )
}

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

விளக்கம்:

• useSWR ஹூக் API எண்ட்பாயிண்டிலிருந்து தரவை மீட்டெடுக்கிறது. suspense: true விருப்பம் சஸ்பென்ஸ் ஒருங்கிணைப்பை செயல்படுத்துகிறது.
• SWR தானாகவே கேச்சிங், மறுமதிப்பீடு மற்றும் பிழை கையாளுதலை நிர்வகிக்கிறது.
• UserProfile காம்போனென்ட் மீட்டெடுக்கப்பட்ட தரவை நேரடியாக அணுகுகிறது. தரவு இன்னும் கிடைக்கவில்லை என்றால், SWR ஒரு ப்ராமிஸை வீசி, சஸ்பென்ஸ் ஃபால்பேக்கைத் தூண்டும்.

நன்மைகள்:

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

குறைபாடுகள்:

• ஒரு புதிய தரவு மீட்டெடுப்பு லைப்ரரியைக் கற்றுக்கொள்ள வேண்டும்.
• கைமுறை தரவு மீட்டெடுப்புடன் ஒப்பிடும்போது சில கூடுதல் சுமையை ஏற்படுத்தலாம்.

சஸ்பென்ஸுடன் பிழை கையாளுதல்

சஸ்பென்ஸைப் பயன்படுத்தும்போது பிழை கையாளுதல் மிகவும் முக்கியமானது. சஸ்பென்ஸ் எல்லைகளுக்குள் ஏற்படும் பிழைகளைப் பிடிக்க ரியாக்ட் ஒரு ErrorBoundary காம்போனென்ட்டை வழங்குகிறது.

எடுத்துக்காட்டு:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // நிலையை புதுப்பிக்கவும், அதனால் அடுத்த ரெண்டர் ஃபால்பேக் UI-ஐக் காட்டும்.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // நீங்கள் பிழையை ஒரு பிழை புகாரளிப்பு சேவைக்கு பதிவு செய்யலாம்
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // நீங்கள் எந்த தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
      return <h1>ஏதோ தவறு நடந்துவிட்டது.</h1>;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>ஏற்றுகிறது...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

விளக்கம்:

• ErrorBoundary காம்போனென்ட் அதன் குழந்தை காம்போனென்ட்களால் (Suspense எல்லைக்குள் உள்ளவை உட்பட) வீசப்படும் எந்தப் பிழைகளையும் பிடிக்கிறது.
• பிழை ஏற்படும்போது இது ஒரு ஃபால்பேக் UI-ஐக் காட்டுகிறது.
• componentDidCatch முறை, பிழைத்திருத்த நோக்கங்களுக்காக பிழையைப் பதிவுசெய்ய உங்களை அனுமதிக்கிறது.

ரியாக்ட் சஸ்பென்ஸைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

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

நிஜ-உலக எடுத்துக்காட்டுகள்

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

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

எடுத்துக்காட்டு 1: சர்வதேச இ-காமர்ஸ் தளம்

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

function ProductDetails({ productId, locale }) {
  const productResource = fetchData(`/api/products/${productId}?locale=${locale}`);
  const product = productResource.read();

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: {product.price}</p>
      <p>Description: {product.description}</p>
    </div>
  );
}

function App() {
  const userLocale = getUserLocale(); // பயனரின் வட்டாரத்தை தீர்மானிக்கும் செயல்பாடு
  return (
    <Suspense fallback={<div>தயாரிப்பு விவரங்கள் ஏற்றப்படுகின்றன...</div>}>
      <ProductDetails productId="123" locale={userLocale} />
    </Suspense>
  );
}

எடுத்துக்காட்டு 2: உலகளாவிய சமூக ஊடக ஊட்டம்

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

function Post({ postId }) {
  const postResource = fetchData(`/api/posts/${postId}`);
  const post = postResource.read();

  return (
    <div>
      <p>{post.text}</p>
      {post.image && <img src={post.image} alt="Post Image" />}
      {post.video && <video src={post.video} controls />}
    </div>
  );
}

function App() {
  const postIds = getPostIds(); // பதிவு ஐடிகளின் பட்டியலை மீட்டெடுக்கும் செயல்பாடு
  return (
    <div>
      {postIds.map(postId => (
        <Suspense key={postId} fallback={<div>பதிவு ஏற்றப்படுகிறது...</div>}>
          <Post postId={postId} />
        </Suspense>
      ))}
    </div>
  );
}

முடிவுரை

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

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