ரியாக்ட் சஸ்பென்ஸ் வாட்டர்பால்: தொடர் டேட்டா லோடிங் உகப்பாக்கலில் ஒரு ஆழமான பார்வை

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

சஸ்பென்ஸ், ஒத்திசைவற்ற (asynchronous) செயல்பாடுகளைக் கையாள ஒரு அறிவிப்பு வழியை வழங்குகிறது, இது நமது கூறு மரத்திற்குள் (component tree) நேரடியாக ஏற்றுதல் நிலைகளைக் (loading states) குறிப்பிட அனுமதிக்கிறது. இது தரவுப் பெறுதல், குறியீடு பிரித்தல் (code splitting) மற்றும் பிற ஒத்திசைவற்ற பணிகளுக்கான குறியீட்டை எளிதாக்குகிறது. இருப்பினும், இந்த சக்தியுடன் புதிய செயல்திறன் பரிசீலனைகளும் வருகின்றன. ஏற்படக்கூடிய ஒரு பொதுவான மற்றும் பெரும்பாலும் நுட்பமான செயல்திறன் சிக்கல் "சஸ்பென்ஸ் வாட்டர்பால்" ஆகும் - இது உங்கள் பயன்பாட்டின் ஏற்றுதல் நேரத்தை முடக்கக்கூடிய தொடர்ச்சியான தரவு-ஏற்றுதல் செயல்பாடுகளின் ஒரு சங்கிலி.

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

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

சிக்கலுக்குள் செல்வதற்கு முன், ரியாக்ட் சஸ்பென்ஸின் முக்கிய கருத்தை சுருக்கமாக மீண்டும் பார்ப்போம். அதன் மையத்தில், சஸ்பென்ஸ் உங்கள் கூறுகள் ரெண்டர் செய்வதற்கு முன் எதற்காவது "காத்திருக்க" அனுமதிக்கிறது, நீங்கள் சிக்கலான நிபந்தனை தர்க்கத்தை (எ.கா., `if (isLoading) { ... }`) எழுத வேண்டிய அவசியமில்லை.

ஒரு சஸ்பென்ஸ் எல்லைக்குள் இருக்கும் ஒரு கூறு இடைநிறுத்தப்படும்போது (ஒரு பிராமிஸை வீசுவதன் மூலம்), ரியாக்ட் அதைப் பிடித்து, ஒரு குறிப்பிட்ட `fallback` UI-ஐக் காட்டுகிறது. பிராமிஸ் தீர்க்கப்பட்டதும், ரியாக்ட் அந்த கூறினை தரவுடன் மீண்டும் ரெண்டர் செய்கிறது.

தரவுப் பெறுதலுடன் ஒரு எளிய உதாரணம் இதுபோல இருக்கலாம்:

• // api.js - நமது fetch அழைப்பை உறைக்குள் வைக்கும் ஒரு பயன்பாடு
• const cache = new Map();
• export function fetchData(url) {
•   if (!cache.has(url)) {
•     cache.set(url, getData(url));
•   }
•   return cache.get(url);
• }
• async function getData(url) {
•   const res = await fetch(url);
•   if (res.ok) {
•     return res.json();
•   } else {
•     throw new Error('Failed to fetch');
•   }
• }

மேலும் இங்கே ஒரு சஸ்பென்ஸ்-இணக்கமான ஹூக்கைப் பயன்படுத்தும் ஒரு கூறு:

• // useData.js - ஒரு பிராமிஸை வீசும் ஒரு ஹூக்
• import { fetchData } from './api';
• function useData(url) {
•   const data = fetchData(url);
•   if (data instanceof Promise) {
•     throw data; // இதுதான் சஸ்பென்ஸைத் தூண்டுகிறது
•   }
•   return data;
• }

இறுதியாக, கூறு மரம் (component tree):

• // MyComponent.js
• import React, { Suspense } from 'react';
• import { useData } from './useData';
• function UserProfile() {
•   const user = useData('/api/user/123');
•   return <h1>Welcome, {user.name}</h1>;
• }
• function App() {
•   return (
•     <Suspense fallback={<h2>பயனர் சுயவிவரம் ஏற்றப்படுகிறது...</h2>}>
•       <UserProfile />
•     </Suspense>
•   );
• }

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

ஒரு "வாட்டர்பால்" என்றால் என்ன? செயல்திறன் தடையை வெளிக்கொணர்தல்

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

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

ஒரு ரியாக்ட் சஸ்பென்ஸ் வாட்டர்பால் என்பது ஒரு ரியாக்ட் கூறு மரத்திற்குள் தரவுப் பெறுதலுக்கு இந்த திறனற்ற, தொடர் முறையைப் பயன்படுத்துவதாகும். இது பொதுவாக ஒரு பெற்றோர் கூறு (parent component) தரவைப் பெற்று, பின்னர் ஒரு குழந்தை கூறினை (child component) ரெண்டர் செய்யும்போது நிகழ்கிறது, அது பெற்றோரிடமிருந்து ஒரு மதிப்பைப் பயன்படுத்தி அதன் சொந்த தரவைப் பெறுகிறது.

ஒரு உன்னதமான வாட்டர்பால் உதாரணம்

நமது முந்தைய உதாரணத்தை விரிவுபடுத்துவோம். நம்மிடம் பயனர் தரவைப் பெறும் ஒரு `ProfilePage` உள்ளது. பயனர் தரவு கிடைத்தவுடன், அது ஒரு `UserPosts` கூறினை ரெண்டர் செய்கிறது, அது பின்னர் பயனரின் ஐடியைப் பயன்படுத்தி அவர்களின் பதிவுகளைப் பெறுகிறது.

• // முன்பு: ஒரு தெளிவான வாட்டர்பால் கட்டமைப்பு
• function ProfilePage({ userId }) {
•   // 1. முதல் நெட்வொர்க் கோரிக்கை இங்கே தொடங்குகிறது
•   const user = useUserData(userId); // கூறு இங்கே இடைநிறுத்தப்படுகிறது
•   return (
•     <div>
•       <h1>{user.name}</h1>
•       <p>{user.bio}</p>
•       <Suspense fallback={<h3>பதிவுகள் ஏற்றப்படுகின்றன...</h3>}>
•         // `user` கிடைக்கும் வரை இந்தக் கூறு மவுண்ட் கூட ஆகாது
•         <UserPosts userId={user.id} />
•       </Suspense>
•     </div>
•   );
• }
• function UserPosts({ userId }) {
•   // 2. இரண்டாவது நெட்வொர்க் கோரிக்கை இங்கே தொடங்குகிறது, முதலாவது முடிந்த பிறகு மட்டுமே
•   const posts = useUserPosts(userId); // கூறு மீண்டும் இடைநிறுத்தப்படுகிறது
•   return (
•     <ul>
•       {posts.map(post => (<li key={post.id}>{post.title}</li>))}
•     </ul>
•   );
• }

நிகழ்வுகளின் வரிசை:

1. `ProfilePage` ரெண்டர் ஆகி, `useUserData(userId)`-ஐ அழைக்கிறது.
2. பயன்பாடு இடைநிறுத்தப்பட்டு, ஒரு ஃபால்பேக் UI-ஐக் காட்டுகிறது. பயனர் தரவுக்கான நெட்வொர்க் கோரிக்கை செயல்பாட்டில் உள்ளது.
3. பயனர் தரவு கோரிக்கை முடிகிறது. ரியாக்ட் `ProfilePage`-ஐ மீண்டும் ரெண்டர் செய்கிறது.
4. இப்போது `user` தரவு கிடைப்பதால், `UserPosts` முதல் முறையாக ரெண்டர் செய்யப்படுகிறது.
5. `UserPosts` `useUserPosts(userId)`-ஐ அழைக்கிறது.
6. பயன்பாடு மீண்டும் இடைநிறுத்தப்பட்டு, உள்ளிருக்கும் "பதிவுகள் ஏற்றப்படுகின்றன..." ஃபால்பேக்கைக் காட்டுகிறது. பதிவுகளுக்கான நெட்வொர்க் கோரிக்கை தொடங்குகிறது.
7. பதிவுகள் தரவு கோரிக்கை முடிகிறது. ரியாக்ட் `UserPosts`-ஐ தரவுடன் மீண்டும் ரெண்டர் செய்கிறது.

மொத்த ஏற்றுதல் நேரம் `நேரம்(பயனரைப் பெறுதல்) + நேரம்(பதிவுகளைப் பெறுதல்)` ஆகும். ஒவ்வொரு கோரிக்கைக்கும் 500ms எடுத்தால், பயனர் ஒரு முழு விநாடி காத்திருக்க வேண்டும். இது ஒரு உன்னதமான வாட்டர்பால், மேலும் இது நாம் தீர்க்க வேண்டிய ஒரு செயல்திறன் சிக்கலாகும்.

உங்கள் பயன்பாட்டில் சஸ்பென்ஸ் வாட்டர்பால்களைக் கண்டறிதல்

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

1. உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்துதல்

உங்கள் உலாவியின் டெவலப்பர் கருவிகளில் உள்ள நெட்வொர்க் தாவல் (tab) உங்கள் சிறந்த நண்பன். இங்கே கவனிக்க வேண்டியவை:

• படிக்கட்டு முறை (Stair-Step Pattern): நீங்கள் ஒரு வாட்டர்பால் உள்ள ஒரு பக்கத்தை ஏற்றும்போது, நெட்வொர்க் கோரிக்கை காலவரிசையில் ஒரு தனித்துவமான படிக்கட்டு அல்லது மூலைவிட்ட முறையைப் பார்ப்பீர்கள். ஒரு கோரிக்கையின் தொடக்க நேரம் முந்தைய கோரிக்கையின் முடிவு நேரத்துடன் கிட்டத்தட்ட சரியாகப் பொருந்தும்.
• நேரப் பகுப்பாய்வு: நெட்வொர்க் தாவலில் உள்ள "வாட்டர்பால்" நெடுவரிசையை ஆராயுங்கள். ஒவ்வொரு கோரிக்கையின் நேரப் பிரிவை (காத்திருப்பு, உள்ளடக்கப் பதிவிறக்கம்) நீங்கள் காணலாம். ஒரு தொடர் சங்கிலி பார்வைக்குத் தெளிவாகத் தெரியும். கோரிக்கை B-யின் "தொடக்க நேரம்" கோரிக்கை A-யின் "முடிவு நேரத்தை" விட அதிகமாக இருந்தால், உங்களிடம் ஒரு வாட்டர்பால் இருக்க வாய்ப்புள்ளது.

2. ரியாக்ட் டெவலப்பர் கருவிகளைப் பயன்படுத்துதல்

ரியாக்ட் பயன்பாடுகளை பிழைத்திருத்தம் செய்வதற்கு ரியாக்ட் டெவலப்பர் கருவிகள் நீட்டிப்பு இன்றியமையாதது.

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

3. நிலையான குறியீடு பகுப்பாய்வு (Static Code Analysis)

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

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

வாட்டர்பால்களை உகப்பாக்கவும் அகற்றவும் உத்திகள்

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

உத்தி 1: `Promise.all` உடன் இணைத் தரவுப் பெறுதல்

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

கருத்து: பெறுதல்களை உள்ளமைப்பதற்கு பதிலாக, அவற்றை ஒரு பொதுவான பெற்றோர் அல்லது உங்கள் பயன்பாட்டு தர்க்கத்தில் ஒரு உயர் மட்டத்தில் தூண்டி, அவற்றை `Promise.all` இல் போர்த்தி, பின்னர் தரவை தேவைப்படும் கூறுகளுக்கு அனுப்பவும்.

நமது `ProfilePage` உதாரணத்தை மறுசீரமைப்போம். நாம் `ProfilePageData` என்ற புதிய கூறினை உருவாக்கலாம், அது எல்லாவற்றையும் இணையாகப் பெறும்.

• // api.js (fetch செயல்பாடுகளை வெளிப்படுத்த மாற்றியமைக்கப்பட்டது)
• export async function fetchUser(userId) { ... }
• export async function fetchPostsForUser(userId) { ... }

• // முன்பு: வாட்டர்பால்
• function ProfilePage({ userId }) {
•   const user = useUserData(userId); // கோரிக்கை 1
•   return <UserPosts userId={user.id} />; // கோரிக்கை 1 முடிந்த பிறகு கோரிக்கை 2 தொடங்குகிறது
• }

• // பிறகு: இணைப் பெறுதல்
• // வளத்தை உருவாக்கும் பயன்பாடு
• function createProfileData(userId) {
•   const userPromise = fetchUser(userId);
•   const postsPromise = fetchPostsForUser(userId);
•   return {
•     user: wrapPromise(userPromise),
•     posts: wrapPromise(postsPromise),
•   };
• }
• // `wrapPromise` என்பது ஒரு கூறு பிராமிஸின் முடிவைப் படிக்க உதவும் ஒரு உதவியாளர்.
• // பிராமிஸ் நிலுவையில் இருந்தால், அது பிராமிஸை வீசுகிறது.
• // பிராமிஸ் தீர்க்கப்பட்டால், அது மதிப்பைத் திருப்புகிறது.
• // பிராமிஸ் நிராகரிக்கப்பட்டால், அது பிழையை வீசுகிறது.
• const resource = createProfileData('123');
• function ProfilePage() {
•   const user = resource.user.read(); // படிக்கிறது அல்லது இடைநிறுத்துகிறது
•   return (
•     <div>
•       <h1>{user.name}</h1>
•       <Suspense fallback={<h3>பதிவுகள் ஏற்றப்படுகின்றன...</h3>}>
•         <UserPosts />
•       </Suspense>
•     </div>
•   );
• }
• function UserPosts() {
•   const posts = resource.posts.read(); // படிக்கிறது அல்லது இடைநிறுத்துகிறது
•   return <ul>...</ul>;
• }

இந்த திருத்தப்பட்ட வடிவத்தில், `createProfileData` ஒரு முறை அழைக்கப்படுகிறது. இது உடனடியாக பயனர் மற்றும் பதிவுகள் ஆகிய இரண்டு பெறுதல் கோரிக்கைகளையும் தொடங்குகிறது. மொத்த ஏற்றுதல் நேரம் இப்போது இரண்டு கோரிக்கைகளின் கூட்டுத்தொகையால் அல்ல, அவற்றில் மெதுவான ஒன்றால் தீர்மானிக்கப்படுகிறது. இரண்டும் 500ms எடுத்தால், மொத்த காத்திருப்பு இப்போது 1000ms என்பதற்குப் பதிலாக ~500ms ஆகும். இது ஒரு பெரிய முன்னேற்றம்.

உத்தி 2: தரவுப் பெறுதலை ஒரு பொதுவான மூதாதையருக்கு உயர்த்துதல்

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

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

• // முன்பு: சகோதரக் கூறுகள் சுயாதீனமாகப் பெறுகின்றன
• function Dashboard() {
•   return (
•     <div>
•       <Suspense fallback={...}><UserInfo /></Suspense>
•       <Suspense fallback={...}><Notifications /></Suspense>
•     </div>
•   );
• }
• // UserInfo பயனர் தரவைப் பெறுகிறது, Notifications அறிவிப்புத் தரவைப் பெறுகிறது.
• // ரியாக்ட் அவற்றை தொடர்ச்சியாக ரெண்டர் *செய்யக்கூடும்*, இது ஒரு சிறிய வாட்டர்பாலை ஏற்படுத்துகிறது.

• // பிறகு: பெற்றோர் எல்லா தரவையும் இணையாகப் பெறுகிறது
• const dashboardResource = createDashboardResource();
• function Dashboard() {
•   // இந்தக் கூறு தரவைப் பெறாது, இது ரெண்டரிங்கை ஒருங்கிணைக்கிறது.
•   return (
•     <div>
•       <Suspense fallback={...}>
•         <UserInfo resource={dashboardResource} />
•         <Notifications resource={dashboardResource} />
•       </Suspense>
•     </div>
•   );
• }
• function UserInfo({ resource }) {
•   const user = resource.user.read();
•   return <div>Welcome, {user.name}</div>;
• }
• function Notifications({ resource }) {
•   const notifications = resource.notifications.read();
•   return <div>You have {notifications.length} new notifications.</div>;
• }

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

உத்தி 3: கேச் (Cache) உடன் ஒரு தரவுப் பெறும் நூலகத்தைப் பயன்படுத்துதல்

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

கருத்து: இந்த நூலகங்கள் ஒரு உலகளாவிய அல்லது வழங்குநர்-நிலை கேச் (cache)-ஐப் பராமரிக்கின்றன. ஒரு கூறு தரவைக் கோரும்போது, நூலகம் முதலில் கேச்-ஐச் சரிபார்க்கிறது. பல கூறுகள் ஒரே தரவை ஒரே நேரத்தில் கோரினால், நூலகம் கோரிக்கையை நகல் நீக்கம் (de-duplicate) செய்யுமளவிற்கு புத்திசாலித்தனமாக உள்ளது, ஒரே ஒரு உண்மையான நெட்வொர்க் கோரிக்கையை மட்டுமே அனுப்புகிறது.

இது எவ்வாறு உதவுகிறது:

• கோரிக்கை நகல் நீக்கம்: `ProfilePage` மற்றும் `UserPosts` இரண்டும் ஒரே பயனர் தரவைக் கோரினால் (எ.கா., `useQuery(['user', userId])`), நூலகம் நெட்வொர்க் கோரிக்கையை ஒரு முறை மட்டுமே அனுப்பும்.
• கேச்சிங் (Caching): முந்தைய கோரிக்கையிலிருந்து தரவு ஏற்கனவே கேச்-இல் இருந்தால், அடுத்தடுத்த கோரிக்கைகளை உடனடியாகத் தீர்க்க முடியும், இது எந்தவொரு சாத்தியமான வாட்டர்பாலையும் உடைக்கிறது.
• இயல்பாகவே இணை: ஹூக் அடிப்படையிலான தன்மை உங்கள் கூறுகளின் உயர் மட்டத்தில் `useQuery`-ஐ அழைக்க உங்களை ஊக்குவிக்கிறது. ரியாக்ட் ரெண்டர் செய்யும்போது, அது இந்த எல்லா ஹூக்குகளையும் ஒரே நேரத்தில் தூண்டும், இது இயல்பாகவே இணைப் பெறுதலுக்கு வழிவகுக்கிறது.

• // ரியாக்ட் கொரி உடன் உதாரணம்
• function ProfilePage({ userId }) {
•   // இந்த ஹூக் ரெண்டர் ஆனவுடன் உடனடியாக அதன் கோரிக்கையை அனுப்புகிறது
•   const { data: user } = useQuery(['user', userId], () => fetchUser(userId), { suspense: true });
•   return (
•     <div>
•       <h1>{user.name}</h1>
•       <Suspense fallback={<h3>பதிவுகள் ஏற்றப்படுகின்றன...</h3>}>
•         // இது உள்ளமைக்கப்பட்டிருந்தாலும், ரியாக்ட் கொரி பெரும்பாலும் திறமையாக முன்-பெறுகிறது அல்லது இணைப் பெறுதல்களைச் செய்கிறது
•         <UserPosts userId={user.id} />
•       </Suspense>
•     </div>
•   );
• }
• function UserPosts({ userId }) {
•   const { data: posts } = useQuery(['posts', userId], () => fetchPostsForUser(userId), { suspense: true });
•   return <ul>...</ul>;
• }

குறியீடு கட்டமைப்பு இன்னும் ஒரு வாட்டர்பால் போலத் தோன்றினாலும், ரியாக்ட் கொரி போன்ற நூலகங்கள் அதைத் தணிக்க போதுமான புத்திசாலித்தனமானவை. இன்னும் சிறந்த செயல்திறனுக்காக, ஒரு கூறு ரெண்டர் ஆவதற்கு முன்பே தரவை ஏற்றத் தொடங்க அவற்றின் முன்-பெறும் (pre-fetching) API-களை நீங்கள் பயன்படுத்தலாம்.

உத்தி 4: Render-as-You-Fetch முறை

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

• ரெண்டரில்-பெறு (Fetch-on-Render) (சிக்கல்): கூறு ரெண்டர் -> useEffect/ஹூக் பெறுதலைத் தூண்டுகிறது. (வாட்டர்பால்களுக்கு வழிவகுக்கிறது).
• பெறு-பின்னர்-ரெண்டர் (Fetch-then-Render): பெறுதலைத் தூண்டு -> காத்திரு -> தரவுடன் கூறினை ரெண்டர் செய். (சிறந்தது, ஆனால் இன்னும் ரெண்டரிங்கைத் தடுக்கலாம்).
• பெறும்போது-ரெண்டர் (Render-as-You-Fetch) (தீர்வு): பெறுதலைத் தூண்டு -> உடனடியாக கூறினை ரெண்டர் செய்யத் தொடங்கு. தரவு தயாராக இல்லை என்றால் கூறு இடைநிறுத்தப்படும்.

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

• // 1. ரூட்டர் அல்லது நிகழ்வு கையாளியில் பெறுதலைத் தொடங்குங்கள்
• import { createProfileData } from './api';
• // ஒரு பயனர் ஒரு சுயவிவரப் பக்கத்திற்கான இணைப்பைக் கிளிக் செய்யும்போது:
• function onProfileLinkClick(userId) {
•   const resource = createProfileData(userId);
•   navigateTo(`/profile/${userId}`, { state: { resource } });
• }

• // 2. பக்கக் கூறு வளத்தைப் பெறுகிறது
• function ProfilePage() {
•   // ஏற்கனவே தொடங்கப்பட்ட வளத்தைப் பெறுங்கள்
•   const resource = useLocation().state.resource;
•   return (
•     <Suspense fallback={<h1>சுயவிவரம் ஏற்றப்படுகிறது...</h1>}>
•       <ProfileDetails resource={resource} />
•       <ProfilePosts resource={resource} />
•     </Suspense>
•   );
• }

• // 3. குழந்தை கூறுகள் வளத்திலிருந்து படிக்கின்றன
• function ProfileDetails({ resource }) {
•   const user = resource.user.read(); // படிக்கிறது அல்லது இடைநிறுத்துகிறது
•   return <h1>{user.name}</h1>;
• }
• function ProfilePosts({ resource }) {
•   const posts = resource.posts.read(); // படிக்கிறது அல்லது இடைநிறுத்துகிறது
•   return <ul>...</ul>;
• }

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

உகப்பாக்கல் உத்திகளை ஒப்பிடுதல்: எதைத் தேர்ந்தெடுப்பது?

சரியான உத்தியைத் தேர்ந்தெடுப்பது உங்கள் பயன்பாட்டின் சிக்கலான தன்மை மற்றும் செயல்திறன் இலக்குகளைப் பொறுத்தது.

• இணைப் பெறுதல் (`Promise.all` / கைமுறை ஒருங்கிணைப்பு):
  • நன்மைகள்: வெளிப்புற நூலகங்கள் தேவையில்லை. ஒரே இடத்தில் உள்ள தரவுத் தேவைகளுக்கு கருத்தியல் ரீதியாக எளிமையானது. செயல்முறையின் மீது முழுமையான கட்டுப்பாடு.
  • தீமைகள்: நிலை (state), பிழைகள் மற்றும் கேச்சிங்கை கைமுறையாக நிர்வகிப்பது சிக்கலானதாக மாறும். ஒரு திடமான கட்டமைப்பு இல்லாமல் நன்றாக அளவிடாது.
  • இதற்கு சிறந்தது: எளிய பயன்பாட்டு நிகழ்வுகள், சிறிய பயன்பாடுகள், அல்லது நூலகத்தின் கூடுதல் சுமையைத் தவிர்க்க விரும்பும் செயல்திறன்-முக்கியமான பிரிவுகள்.
• தரவுப் பெறுதலை உயர்த்துதல்:
  • நன்மைகள்: கூறு மரங்களில் தரவு ஓட்டத்தை ஒழுங்கமைக்க நல்லது. ஒரு குறிப்பிட்ட வியூவிற்கான பெறுதல் தர்க்கத்தை மையப்படுத்துகிறது.
  • தீமைகள்: ப்ராப் டிரில்லிங்கிற்கு (prop drilling) வழிவகுக்கலாம் அல்லது தரவை கீழே அனுப்ப ஒரு நிலை மேலாண்மை தீர்வு தேவைப்படலாம். பெற்றோர் கூறு பருமனாக மாறக்கூடும்.
  • இதற்கு சிறந்தது: பல சகோதரக் கூறுகள் அவற்றின் பொதுவான பெற்றோரிடமிருந்து பெறக்கூடிய தரவின் மீது ஒரு சார்பைப் பகிரும்போது.
• தரவுப் பெறும் நூலகங்கள் (ரியாக்ட் கொரி, SWR):
  • நன்மைகள்: மிகவும் வலிமையான மற்றும் டெவலப்பர்-நட்பு தீர்வு. கேச்சிங், நகல் நீக்கம், பின்னணி மறுபெறுதல் மற்றும் பிழை நிலைகளை உடனடியாகக் கையாளுகிறது. தேவையற்ற குறியீட்டை (boilerplate) பெருமளவில் குறைக்கிறது.
  • தீமைகள்: உங்கள் திட்டத்தில் ஒரு நூலகச் சார்பைச் சேர்க்கிறது. நூலகத்தின் குறிப்பிட்ட API-ஐக் கற்றுக்கொள்ள வேண்டும்.
  • இதற்கு சிறந்தது: நவீன ரியாக்ட் பயன்பாடுகளில் பெரும்பாலானவை. முக்கியத்துவம் வாய்ந்த தரவுத் தேவைகளைக் கொண்ட எந்தவொரு திட்டத்திற்கும் இது இயல்புநிலை தேர்வாக இருக்க வேண்டும்.
• Render-as-You-Fetch:
  • நன்மைகள்: மிக உயர்ந்த செயல்திறன் முறை. கூறு குறியீடு ஏற்றுதல் மற்றும் தரவுப் பெறுதல் ஆகியவற்றை ஒன்றன் மீது ஒன்றாகச் செய்வதன் மூலம் இணைத்தன்மையை அதிகரிக்கிறது.
  • தீமைகள்: சிந்தனையில் ஒரு குறிப்பிடத்தக்க மாற்றம் தேவை. ரிலே அல்லது நெக்ஸ்ட்.js போன்ற இந்த முறை உள்ளமைக்கப்பட்ட ஒரு கட்டமைப்பைப் பயன்படுத்தாவிட்டால், அமைக்க அதிக தேவையற்ற குறியீடு தேவைப்படலாம்.
  • இதற்கு சிறந்தது: ஒவ்வொரு மில்லி விநாடியும் முக்கியத்துவம் வாய்ந்த, தாமதம்-முக்கியமான பயன்பாடுகள். ரூட்டிங்கை தரவுப் பெறுதலுடன் ஒருங்கிணைக்கும் கட்டமைப்புகள் இந்த முறைக்கு உகந்த சூழலாகும்.

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

ஒரு உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது, வாட்டர்பால்களை அகற்றுவது ஒரு கூடுதல் சிறப்பு மட்டுமல்ல—அது அவசியம்.

• தாமதம் சீரானது அல்ல: ஒரு 200ms வாட்டர்பால் உங்கள் சேவையகத்திற்கு அருகிலுள்ள ஒரு பயனருக்கு едва கவனிக்கத்தக்கதாக இருக்கலாம், ஆனால் அதிக தாமதம் கொண்ட மொபைல் இணையத்துடன் வேறு கண்டத்தில் உள்ள ஒரு பயனருக்கு, அதே வாட்டர்பால் அவர்களின் ஏற்றுதல் நேரத்தில் விநாடிகளைச் சேர்க்கக்கூடும். உயர் தாமதத்தின் தாக்கத்தைத் தணிக்க, கோரிக்கைகளை இணைப்படுத்துவதே ஒரே மிகச் சிறந்த வழியாகும்.
• குறியீடு பிரித்தல் வாட்டர்பால்கள்: வாட்டர்பால்கள் தரவிற்கு மட்டும் அல்ல. ஒரு பொதுவான முறை `React.lazy()` ஒரு கூறு பண்டிலை ஏற்றுவது, அது பின்னர் அதன் சொந்த தரவைப் பெறுகிறது. இது ஒரு குறியீடு -> தரவு வாட்டர்பால் ஆகும். Render-as-You-Fetch முறை, ஒரு பயனர் செல்லும்போது கூறு மற்றும் அதன் தரவு இரண்டையும் முன்கூட்டியே ஏற்றுவதன் மூலம் இதைத் தீர்க்க உதவுகிறது.
• இலகுவான பிழை கையாளுதல்: நீங்கள் இணையாக தரவைப் பெறும்போது, பகுதி தோல்விகளைக் கருத்தில் கொள்ள வேண்டும். பயனர் தரவு ஏற்றப்பட்டு, ஆனால் பதிவுகள் தோல்வியுற்றால் என்ன நடக்கும்? உங்கள் UI இதை இலகுவாக கையாள வேண்டும், ஒருவேளை பயனர் சுயவிவரத்தை பதிவுகள் பிரிவில் ஒரு பிழைச் செய்தியுடன் காட்டலாம். ரியாக்ட் கொரி போன்ற நூலகங்கள் ஒவ்வொரு கொரிக்கான பிழை நிலைகளைக் கையாள தெளிவான வடிவங்களை வழங்குகின்றன.
• அர்த்தமுள்ள ஃபால்பேக்குகள்: தரவு ஏற்றப்படும்போது ஒரு நல்ல பயனர் அனுபவத்தை வழங்க `` இன் `fallback` ப்ராப்பைப் பயன்படுத்தவும். ஒரு பொதுவான ஸ்பின்னருக்குப் பதிலாக, இறுதி UI-இன் வடிவத்தைப் பிரதிபலிக்கும் ஸ்கெலிட்டன் லோடர்களைப் பயன்படுத்தவும். இது உணரப்பட்ட செயல்திறனை மேம்படுத்துகிறது மற்றும் நெட்வொர்க் மெதுவாக இருக்கும்போது கூட பயன்பாடு வேகமானதாக உணர வைக்கிறது.

முடிவுரை

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

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

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