ரியாக்ட் சஸ்பென்ஸ்: தரவு பெறுதல் மற்றும் குறியீடு பிரிப்பதற்கான ஒரு விரிவான வழிகாட்டி

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

ரியாக்ட் சஸ்பென்ஸ் என்றால் என்ன?

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

• தரவு பெறுதல்: ஒரு API இலிருந்து தரவு மீட்டெடுக்கப்படும் வரை காத்திருத்தல்.
• குறியீடு பிரித்தல்: ஜாவாஸ்கிரிப்ட் மாட்யூல்கள் பதிவிறக்கம் செய்யப்பட்டு பகுப்பாய்வு செய்யப்படும் வரை காத்திருத்தல்.

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

முக்கிய கருத்துக்கள்

• சஸ்பென்ஸ் காம்போனென்ட்: <Suspense> காம்போனென்ட். இது ஒரு fallback ப்ராப்பை ஏற்றுக்கொள்கிறது, இது சுற்றியுள்ள காம்போனென்ட்கள் இடைநிறுத்தப்பட்டிருக்கும் போது காட்டப்படும் UI-ஐக் குறிப்பிடுகிறது.
• React.lazy(): காம்போனென்ட்களை டைனமிக்காக இறக்குமதி செய்வதன் மூலம் குறியீடு பிரித்தலை இயக்கும் ஒரு செயல்பாடு. இது காம்போனென்ட் ஏற்றப்படும்போது தீர்க்கப்படும் ஒரு Promise ஐத் திருப்பித் தருகிறது.
• ப்ராமிஸ் ஒருங்கிணைப்பு: சஸ்பென்ஸ் ப்ராமிஸ்களுடன் தடையின்றி ஒருங்கிணைக்கிறது. ஒரு காம்போனென்ட் இன்னும் தீர்க்கப்படாத ஒரு ப்ராமிஸிலிருந்து தரவை ரெண்டர் செய்ய முயற்சிக்கும்போது, அது "இடைநிறுத்தப்பட்டு" ஃபால்பேக் UI-ஐக் காட்டுகிறது.

பயன்பாட்டு வழக்குகள்

1. சஸ்பென்ஸுடன் தரவு பெறுதல்

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

உதாரணம்: ஒரு API இலிருந்து பயனர் தரவைப் பெறுதல்

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

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

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

export default UserProfile;

இந்தக் குறியீடு வேலை செய்கிறது, ஆனால் இது பல நிலை மாறிகளை (isLoading, error, user) மற்றும் நிபந்தனை ரெண்டரிங் தர்க்கத்தை நிர்வகிப்பதை உள்ளடக்கியது. சஸ்பென்ஸுடன், SWR அல்லது TanStack Query (முன்னர் ரியாக்ட் குவெரி) போன்ற தரவு பெறும் நூலகத்தைப் பயன்படுத்தி இதை எளிதாக்கலாம், இவை சஸ்பென்ஸுடன் தடையின்றி வேலை செய்ய வடிவமைக்கப்பட்டுள்ளன.

SWR-ஐ சஸ்பென்ஸுடன் நீங்கள் எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:

import React from 'react';
import useSWR from 'swr';

// A simple fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

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

  if (error) {
    return <p>Error: {error.message}</p>;
  }

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

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

export default App;

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

• பயனர் தரவைப் பெற நாம் useSWR பயன்படுத்துகிறோம். suspense: true விருப்பம், தரவு இன்னும் கிடைக்கவில்லை என்றால் ஒரு ப்ராமிஸை வீசும்படி SWR-க்கு கூறுகிறது.
• UserProfile காம்போனென்ட் வெளிப்படையாக லோடிங் அல்லது பிழை நிலைகளை நிர்வகிக்கத் தேவையில்லை. அது கிடைக்கும்போது பயனர் தரவை வெறுமனே ரெண்டர் செய்கிறது.
• <Suspense> காம்போனென்ட் SWR ஆல் வீசப்பட்ட ப்ராமிஸைப் பிடித்து, தரவு பெறப்படும்போது ஃபால்பேக் UI-ஐ (<p>பயனர் தரவு ஏற்றப்படுகிறது...</p>) காட்டுகிறது.

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

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

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

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

2. React.lazy() மற்றும் சஸ்பென்ஸுடன் குறியீடு பிரித்தல்

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

ரியாக்ட் காம்போனென்ட்களை குறியீடு பிரித்தலுக்கு React.lazy() செயல்பாட்டை வழங்குகிறது. சஸ்பென்ஸுடன் பயன்படுத்தும்போது, காம்போனென்ட் பதிவிறக்கம் செய்யப்பட்டு பகுப்பாய்வு செய்யப்படும் வரை காத்திருக்கும்போது ஒரு ஃபால்பேக் UI-ஐக் காட்ட இது உங்களை அனுமதிக்கிறது.

உதாரணம்: ஒரு காம்போனென்டை சோம்பேறித்தனமாக ஏற்றுதல் (Lazy loading)

import React, { Suspense, lazy } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>ஏற்றுகிறது...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

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

• OtherComponent-ஐ டைனமிக்காக இறக்குமதி செய்ய நாம் React.lazy() பயன்படுத்துகிறோம். இது காம்போனென்ட் ஏற்றப்படும்போது தீர்க்கப்படும் ஒரு ப்ராமிஸைத் திருப்பித் தருகிறது.
• நாம் <OtherComponent />-ஐ <Suspense>-உடன் சுற்றி வைக்கிறோம் மற்றும் ஒரு fallback ப்ராப்பை வழங்குகிறோம்.
• OtherComponent ஏற்றப்படும்போது, ஃபால்பேக் UI (<p>ஏற்றுகிறது...</p>) காட்டப்படும். காம்போனென்ட் ஏற்றப்பட்டதும், அது ஃபால்பேக் UI-ஐ மாற்றும்.

குறியீடு பிரித்தலின் நன்மைகள்:

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

மேம்பட்ட குறியீடு பிரித்தல் நுட்பங்கள்:

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

3. கன்கரென்ட் மோட் மற்றும் சஸ்பென்ஸ்

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

கன்கரென்ட் மோட் மற்றும் சஸ்பென்ஸுடன், ரியாக்ட் செய்யக்கூடியவை:

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

கன்கரென்ட் மோடை இயக்க, நீங்கள் ரியாக்ட் 18 இல் createRoot API-ஐப் பயன்படுத்தலாம்:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

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

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

எரர் பவுண்டரிகளுடன் பிழை கையாளுதல்

சஸ்பென்ஸ் *லோடிங்* நிலையைக் கையாளும் போது, எரர் பவுண்டரிகள் ரெண்டரிங்கின் போது *பிழை* நிலையைக் கையாளுகின்றன. எரர் பவுண்டரிகள் என்பது ரியாக்ட் காம்போனென்ட்கள் ஆகும், அவை அவற்றின் சைல்ட் காம்போனென்ட் ட்ரீயில் எங்கும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, அந்தப் பிழைகளைப் பதிவுசெய்து, முழு காம்போனென்ட் ட்ரீயையும் செயலிழக்கச் செய்வதற்குப் பதிலாக ஒரு ஃபால்பேக் UI-ஐக் காட்டுகின்றன.

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

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>ஏதோ தவறு நடந்துவிட்டது.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

எரர் பவுண்டரியைப் பயன்படுத்த, பிழையை ஏற்படுத்தக்கூடிய காம்போனென்டைச் சுற்றி அதைப் போர்த்தவும்:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

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

நிஜ உலக உதாரணங்கள்

பயனர் அனுபவத்தை மேம்படுத்த சஸ்பென்ஸை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நிஜ உலக உதாரணங்கள் இங்கே:

• இ-காமர்ஸ் இணையதளம்: தயாரிப்பு விவரங்கள் அல்லது படங்களைப் பெறும்போது லோடிங் குறிகாட்டிகளைக் காட்ட சஸ்பென்ஸைப் பயன்படுத்தவும். இது பயனர் தரவு ஏற்றப்படும் வரை காத்திருக்கும்போது ஒரு வெற்றுப் பக்கத்தைப் பார்ப்பதைத் தடுக்கலாம்.
• சமூக ஊடக தளம்: பயனர் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும்போது கருத்துகள் அல்லது இடுகைகளை சோம்பேறித்தனமாக ஏற்ற சஸ்பென்ஸைப் பயன்படுத்தவும். இது பக்கத்தின் ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்தலாம் மற்றும் பதிவிறக்கம் செய்யப்பட வேண்டிய தரவின் அளவைக் குறைக்கலாம்.
• டாஷ்போர்டு பயன்பாடு: விளக்கப்படங்கள் அல்லது வரைபடங்களுக்கான தரவைப் பெறும்போது லோடிங் குறிகாட்டிகளைக் காட்ட சஸ்பென்ஸைப் பயன்படுத்தவும். இது ஒரு மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்க முடியும்.

உதாரணம்: சர்வதேச இ-காமர்ஸ் தளம்

உலகளவில் தயாரிப்புகளை விற்கும் ஒரு சர்வதேச இ-காமர்ஸ் தளத்தைக் கவனியுங்கள். இந்த தளம் சஸ்பென்ஸ் மற்றும் React.lazy() ஐப் பயன்படுத்தி பின்வருவனவற்றைச் செய்யலாம்:

• தயாரிப்புப் படங்களை சோம்பேறித்தனமாக ஏற்றுதல்: தயாரிப்புப் படங்கள் வியூபோர்ட்டில் தெரியும் போது மட்டுமே அவற்றை ஏற்றுவதற்கு React.lazy() ஐப் பயன்படுத்தவும். இது தயாரிப்புப் பட்டியல் பக்கத்தின் ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாகக் குறைக்கும். உண்மையான படம் ஏற்றப்படும்போது ஒரு பிளேஸ்ஹோல்டர் படத்தைக் காட்ட ஒவ்வொரு சோம்பேறித்தனமாக ஏற்றப்பட்ட படத்தையும் <Suspense fallback={<img src="placeholder.png" alt="ஏற்றுகிறது..." />}> கொண்டு போர்த்தவும்.
• நாட்டிற்கான குறிப்பிட்ட காம்போனென்ட்களை குறியீடு பிரித்தல்: தளத்தில் நாட்டிற்கான குறிப்பிட்ட காம்போனென்ட்கள் (எ.கா., நாணய வடிவமைப்பு, முகவரி உள்ளீட்டு புலங்கள்) இருந்தால், பயனர் ஒரு குறிப்பிட்ட நாட்டைத் தேர்ந்தெடுக்கும்போது மட்டுமே இந்த காம்போனென்ட்களை ஏற்றுவதற்கு React.lazy() ஐப் பயன்படுத்தவும்.
• உள்ளூர்மயமாக்கப்பட்ட தயாரிப்பு விளக்கங்களைப் பெறுதல்: பயனரின் விருப்பமான மொழியில் தயாரிப்பு விளக்கங்களைப் பெற சஸ்பென்ஸுடன் SWR போன்ற தரவு பெறும் நூலகத்தைப் பயன்படுத்தவும். உள்ளூர்மயமாக்கப்பட்ட விளக்கங்கள் பெறப்படும்போது ஒரு லோடிங் காட்சியைக் காட்டவும்.

முடிவுரை

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

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

மேலும் அறிய

• ரியாக்ட் சஸ்பென்ஸ் ஆவணங்கள்
• SWR ஆவணங்கள்
• டான்ஸ்டாக் குவெரி ஆவணங்கள்
• ரியாக்ட் 18 அறிவிப்பு (கன்கரென்ட் மோட்)