React experimental_SuspenseList: சஸ்பென்ஸ் லோடிங் பேட்டர்னை முழுமையாகக் கற்றல்

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

Suspense மற்றும் அதன் வரம்புகளைப் புரிந்துகொள்ளுதல்

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

import React, { Suspense } from 'react';

const ProfileDetails = React.lazy(() => import('./ProfileDetails'));
const ProfilePosts = React.lazy(() => import('./ProfilePosts'));

function ProfilePage() {
  return (
    <Suspense fallback={<p>சுயவிவரம் ஏற்றப்படுகிறது...</p>}>
      <ProfileDetails />
      <Suspense fallback={<p>பதிவுகள் ஏற்றப்படுகின்றன...</p>}>
        <ProfilePosts />
      </Suspense>
    </Suspense>
  );
}

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

experimental_SuspenseList-ஐ அறிமுகப்படுத்துதல்

experimental_SuspenseList, Suspense எல்லைகள் வெளிப்படுத்தப்படும் வரிசையை ஒருங்கிணைக்க உங்களை அனுமதிக்கிறது. இது revealOrder prop மூலம் கட்டுப்படுத்தப்படும் இரண்டு முதன்மை நடத்தைகளை வழங்குகிறது:

• forwards: கூறு மரத்தில் தோன்றும் வரிசையில் Suspense எல்லைகளை வெளிப்படுத்துகிறது.
• backwards: Suspense எல்லைகளை தலைகீழ் வரிசையில் வெளிப்படுத்துகிறது.
• together: அனைத்து Suspense எல்லைகளையும் ஒரே நேரத்தில் வெளிப்படுத்துகிறது.

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

import { unstable_SuspenseList as SuspenseList } from 'react';

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

`revealOrder="forwards"` உடன் தொடர்முறை லோடிங்கை செயல்படுத்துதல்

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

import React, { Suspense, lazy } from 'react';
import { unstable_SuspenseList as SuspenseList } from 'react';

const ProfileHeader = lazy(() => import('./ProfileHeader'));
const ProfileDetails = lazy(() => import('./ProfileDetails'));
const ProfilePosts = lazy(() => import('./ProfilePosts'));

function ProfilePage() {
  return (
    <SuspenseList revealOrder="forwards">
      <Suspense fallback={<p>தலைப்பு ஏற்றப்படுகிறது...</p>}>
        <ProfileHeader />
      </Suspense>
      <Suspense fallback={<p>விவரங்கள் ஏற்றப்படுகின்றன...</p>}>
        <ProfileDetails />
      </Suspense>
      <Suspense fallback={<p>பதிவுகள் ஏற்றப்படுகின்றன...</p>}>
        <ProfilePosts />
      </Suspense>
    </SuspenseList>
  );
}

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

1. "தலைப்பு ஏற்றப்படுகிறது..."
2. "விவரங்கள் ஏற்றப்படுகின்றன..." (ProfileHeader ஏற்றப்பட்ட பிறகு தோன்றும்)
3. "பதிவுகள் ஏற்றப்படுகின்றன..." (ProfileDetails ஏற்றப்பட்ட பிறகு தோன்றும்)

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

`revealOrder="backwards"` உடன் தலைகீழ் தொடர்முறை லோடிங்

பக்கத்தின் கீழே உள்ள கூறுகளை முதலில் ஏற்றுவதற்கு முன்னுரிமை அளிக்க விரும்பும் சூழ்நிலைகளில் backwards வெளிப்படுத்தும் வரிசை பயனுள்ளதாக இருக்கும். பக்கத்தில் மேலும் கீழே இருந்தாலும், மிக முக்கியமான உள்ளடக்கத்தை விரைவாகக் காட்ட விரும்பினால் இது விரும்பத்தக்கதாக இருக்கலாம். மேலே உள்ள அதே எடுத்துக்காட்டைப் பயன்படுத்தி, revealOrder-ஐ `backwards` என மாற்றினால்:

<SuspenseList revealOrder="backwards">
  <Suspense fallback={<p>தலைப்பு ஏற்றப்படுகிறது...</p>}>
    <ProfileHeader />
  </Suspense>
  <Suspense fallback={<p>விவரங்கள் ஏற்றப்படுகின்றன...</p>}>
    <ProfileDetails />
  </Suspense>
  <Suspense fallback={<p>பதிவுகள் ஏற்றப்படுகின்றன...</p>}>
    <ProfilePosts />
  </Suspense>
</SuspenseList>

லோடிங் குறிகாட்டிகள் இப்போது பின்வரும் வரிசையில் தோன்றும்:

1. "பதிவுகள் ஏற்றப்படுகின்றன..."
2. "விவரங்கள் ஏற்றப்படுகின்றன..." (ProfilePosts ஏற்றப்பட்ட பிறகு தோன்றும்)
3. "தலைப்பு ஏற்றப்படுகிறது..." (ProfileDetails ஏற்றப்பட்ட பிறகு தோன்றும்)

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

`revealOrder="together"` உடன் ஒரேநேர லோடிங்

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

<SuspenseList revealOrder="together">
  <Suspense fallback={<p>தலைப்பு ஏற்றப்படுகிறது...</p>}>
    <ProfileHeader />
  </Suspense>
  <Suspense fallback={<p>விவரங்கள் ஏற்றப்படுகின்றன...</p>}>
    <ProfileDetails />
  </Suspense>
  <Suspense fallback={<p>பதிவுகள் ஏற்றப்படுகின்றன...</p>}>
    <ProfilePosts />
  </Suspense>
</SuspenseList>

இந்த வழக்கில், மூன்று லோடிங் செய்திகளும் ("தலைப்பு ஏற்றப்படுகிறது...", "விவரங்கள் ஏற்றப்படுகின்றன...", மற்றும் "பதிவுகள் ஏற்றப்படுகின்றன...") ஒரே நேரத்தில் தோன்றும்.

`tail` உடன் வெளிப்படுத்தல் அனிமேஷன்களைக் கட்டுப்படுத்துதல்

experimental_SuspenseList tail என்ற மற்றொரு prop-ஐ வழங்குகிறது, இது அடுத்தடுத்த உருப்படிகள் இன்னும் ஏற்றப்படும்போது ஏற்கனவே வெளிப்படுத்தப்பட்ட உருப்படிகள் எவ்வாறு நடந்துகொள்கின்றன என்பதைக் கட்டுப்படுத்துகிறது. இது இரண்டு மதிப்புகளை ஏற்றுக்கொள்கிறது:

• suspense: ஏற்கனவே வெளிப்படுத்தப்பட்ட உருப்படிகளும் ஒரு Suspense எல்லைக்குள் ஒரு fallback உடன் வைக்கப்படும். இது பட்டியலிலுள்ள அனைத்து உருப்படிகளும் ஏற்றப்படும் வரை அவற்றை மீண்டும் மறைக்கிறது.
• collapsed: அடுத்தடுத்த உருப்படிகள் ஏற்றப்படும்போது ஏற்கனவே வெளிப்படுத்தப்பட்ட உருப்படிகள் தெரியும். tail prop குறிப்பிடப்படவில்லை என்றால் இதுவே இயல்புநிலை நடத்தை.

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

tail="suspense"-ஐப் பயன்படுத்துவது, பதிவுகள் ஏற்றப்படும் வரை தலைப்பு மறைந்திருப்பதை (அல்லது ஒரு fallback-ஐக் காண்பிப்பதை) உறுதி செய்யும், இது ஒரு மென்மையான மாற்றத்தை உருவாக்கும்.

<SuspenseList revealOrder="forwards" tail="suspense">
  <Suspense fallback={<p>தலைப்பு ஏற்றப்படுகிறது...</p>}>
    <ProfileHeader />
  </Suspense>
  <Suspense fallback={<p>விவரங்கள் ஏற்றப்படுகின்றன...</p>}>
    <ProfileDetails />
  </Suspense>
  <Suspense fallback={<p>பதிவுகள் ஏற்றப்படுகின்றன...</p>}>
    <ProfilePosts />
  </Suspense>
</SuspenseList>

SuspenseLists-களை ஒன்றினுள் ஒன்று வைத்தல்

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

import React, { Suspense, lazy } from 'react';
import { unstable_SuspenseList as SuspenseList } from 'react';

const ProfileHeader = lazy(() => import('./ProfileHeader'));
const ProfileDetails = lazy(() => import('./ProfileDetails'));
const ProfilePosts = lazy(() => import('./ProfilePosts'));
const AdBanner = lazy(() => import('./AdBanner'));
const RelatedArticles = lazy(() => import('./RelatedArticles'));

function ProfilePage() {
  return (
    <SuspenseList revealOrder="forwards">
      <Suspense fallback={<p>தலைப்பு ஏற்றப்படுகிறது...</p>}>
        <ProfileHeader />
      </Suspense>
      <div>
        <SuspenseList revealOrder="forwards">
          <Suspense fallback={<p>விவரங்கள் ஏற்றப்படுகின்றன...</p>}>
            <ProfileDetails />
          </Suspense>
          <Suspense fallback={<p>பதிவுகள் ஏற்றப்படுகின்றன...</p>}>
            <ProfilePosts />
          </Suspense>
        </SuspenseList>
      </div>
       <Suspense fallback={<p>விளம்பரம் ஏற்றப்படுகிறது...</p>}>
            <AdBanner />
          </Suspense>
          <Suspense fallback={<p>தொடர்புடைய கட்டுரைகள் ஏற்றப்படுகின்றன...</p>}>
            <RelatedArticles />
          </Suspense>
    </SuspenseList>
  );
}

இந்த எடுத்துக்காட்டில், ProfileHeader முதலில் ஏற்றப்படும், அதைத் தொடர்ந்து ProfileDetails மற்றும் ProfilePosts, இறுதியாக AdBanner மற்றும் RelatedArticles ஏற்றப்படும். உள் SuspenseList, ProfileDetails ஆனது ProfilePosts-க்கு முன் ஏற்றப்படுவதை உறுதி செய்கிறது. லோடிங் வரிசையின் மீது இந்த அளவிலான கட்டுப்பாடு உங்கள் பயன்பாட்டின் உணரப்பட்ட செயல்திறன் மற்றும் பதிலளிப்புத்தன்மையை கணிசமாக மேம்படுத்தும்.

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் சர்வதேசக் கருத்தாய்வுகள்

experimental_SuspenseList-இன் நன்மைகள் பல்வேறு பயன்பாட்டு வகைகள் மற்றும் சர்வதேச பயனர் தளங்களில் பரவுகின்றன. இந்த காட்சிகளைக் கவனியுங்கள்:

• இ-காமர்ஸ் தளங்கள்: ஒரு உலகளாவிய இ-காமர்ஸ் தளம், மதிப்புரைகளுக்கு முன் தயாரிப்பு படங்கள் மற்றும் விளக்கங்களை ஏற்றுவதற்கு முன்னுரிமை அளிக்க experimental_SuspenseList-ஐப் பயன்படுத்தலாம், பயனர்கள் கிடைக்கக்கூடிய தயாரிப்புகளை விரைவாக உலாவ முடியும் என்பதை உறுதி செய்கிறது. `revealOrder="forwards"`-ஐப் பயன்படுத்துவதன் மூலம், முக்கிய தயாரிப்பு விவரங்கள் முதலில் ஏற்றப்படுவதை உறுதிசெய்யலாம், இது உலகெங்கிலும் உள்ள பயனர்கள் வாங்கும் முடிவுகளை எடுப்பதற்கு முக்கியமானது.
• செய்தி இணையதளங்கள்: பல நாடுகளில் உள்ள வாசகர்களுக்கு சேவை செய்யும் ஒரு செய்தி இணையதளம், குறைவான முக்கியமான உள்ளடக்கத்திற்கு முன் முக்கிய செய்திகளின் தலைப்புகளை ஏற்றுவதற்கு முன்னுரிமை அளிக்க experimental_SuspenseList-ஐப் பயன்படுத்தலாம், பயனர்கள் முக்கியமான நிகழ்வுகளை உடனடியாக அறிந்துகொள்வதை உறுதி செய்கிறது. பிராந்திய-குறிப்பிட்ட செய்திகளின் அடிப்படையில் லோடிங் வரிசையைத் தனிப்பயனாக்குவதையும் செயல்படுத்தலாம்.
• சமூக ஊடகப் பயன்பாடுகள்: ஒரு சமூக ஊடகத் தளம், பயனர் சுயவிவரங்களை தொடர்ச்சியாக ஏற்றுவதற்கு experimental_SuspenseList-ஐப் பயன்படுத்தலாம், சுயவிவரப் படம் மற்றும் பயனர் பெயருடன் தொடங்கி, பயனர் விவரங்கள் மற்றும் சமீபத்திய பதிவுகளுடன் தொடர்கிறது. இது ஆரம்பத்தில் உணரப்பட்ட செயல்திறன் மற்றும் பயனர் ஈடுபாட்டை மேம்படுத்துகிறது, குறிப்பாக மாறுபட்ட இணைய வேகங்களைக் கொண்ட பிராந்தியங்களில் இது முக்கியமானது.
• டாஷ்போர்டுகள் மற்றும் அனலிட்டிக்ஸ்: பல்வேறு மூலங்களிலிருந்து (எ.கா., கூகிள் அனலிட்டிக்ஸ், சேல்ஸ்ஃபோர்ஸ், உள் தரவுத்தளங்கள்) தரவைக் காண்பிக்கும் டாஷ்போர்டுகளுக்கு, experimental_SuspenseList வெவ்வேறு தரவுக் காட்சிகளின் லோடிங்கை ஒருங்கிணைக்க முடியும். இது ஒரு மென்மையான லோடிங் அனுபவத்தை உறுதி செய்கிறது, குறிப்பாக சில தரவு மூலங்கள் மற்றவற்றை விட மெதுவாக இருக்கும்போது. ஒருவேளை முக்கிய செயல்திறன் குறிகாட்டிகளை (KPIs) முதலில் காட்டி, அதைத் தொடர்ந்து விரிவான விளக்கப்படங்கள் மற்றும் வரைபடங்களைக் காட்டலாம்.

ஒரு உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது, experimental_SuspenseList-ஐச் செயல்படுத்தும்போது பின்வரும் சர்வதேசமயமாக்கல் (i18n) காரணிகளைக் கவனியுங்கள்:

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

React Router உடன் experimental_SuspenseList-ஐ இணைத்தல்

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

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { unstable_SuspenseList as SuspenseList } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <Router>
      <SuspenseList revealOrder="forwards">
        <Suspense fallback={<p>முகப்பு பக்கம் ஏற்றப்படுகிறது...</p>}>
          <Route exact path="/" component={Home} />
        </Suspense>
        <Suspense fallback={<p>பற்றி பக்கம் ஏற்றப்படுகிறது...</p>}>
          <Route path="/about" component={About} />
        </Suspense>
        <Suspense fallback={<p>தொடர்பு பக்கம் ஏற்றப்படுகிறது...</p>}>
          <Route path="/contact" component={Contact} />
        </Suspense>
      </SuspenseList>
    </Router>
  );
}

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

பிழை கையாளுதல் மற்றும் Fallback உத்திகள்

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

Suspense எல்லைகளுக்குள் பிழைகளைப் பிடிக்கவும், ஒரு தனிப்பயன் பிழை செய்தியைக் காட்டவும் நீங்கள் useErrorBoundary ஹூக்கைப் (சில பிழை எல்லை நூலகங்களில் கிடைக்கிறது) பயன்படுத்தலாம். பயனர் கூறினை மீண்டும் ஏற்ற முயற்சிப்பதை அனுமதிக்க நீங்கள் ஒரு மறுமுயற்சி பொறிமுறையையும் செயல்படுத்தலாம்.

import React, { Suspense, lazy } from 'react';
import { useErrorBoundary } from 'react-error-boundary';

const MyComponent = lazy(() => import('./MyComponent'));

function MyComponentWrapper() {
  const { showBoundary, reset } = useErrorBoundary();

  if (showBoundary) {
    return (
      <div>
        <p>MyComponent-ஐ ஏற்றும்போது ஒரு பிழை ஏற்பட்டது.</p>
        <button onClick={reset}>மீண்டும் முயற்சிக்கவும்</button>
      </div>
    );
  }

  return <MyComponent />;
}

function App() {
  return (
    <Suspense fallback={<p>ஏற்றப்படுகிறது...</p>}>
      <MyComponentWrapper />
    </Suspense>
  );
}

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

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

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

முடிவு: சஸ்பென்ஸ் லோடிங் பேட்டர்ன்களை ஏற்றுக்கொள்வது

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

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