React தேர்வுமுறை நீரேற்றம்: முன்னுரிமை அடிப்படையிலான கூறு ஏற்றுதலுடன் செயல்திறனை அதிகரித்தல்

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

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

function App() {
  return (
    Loading...

இந்த எடுத்துக்காட்டில், `MyComponent` சோம்பேறித்தனமாக ஏற்றப்படுகிறது. `MyComponent` பெறப்பட்டு நீரேற்றம் செய்யப்படும்போது `Suspense` கூறு "ஏற்றுகிறது..." என்பதைக் காட்டுகிறது. இது `MyComponent` க்காகக் காத்திருக்காமல் பயன்பாட்டின் மற்ற பகுதிகள் நீரேற்றம் செய்யப்படுவதை உறுதி செய்கிறது.

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

2. `useEffect` உடன் நிபந்தனை நீரேற்றம்

சில நிபந்தனைகளின் அடிப்படையில் கூறுகளை நிபந்தனையுடன் நீரேற்றம் செய்ய `useEffect` ஹூக்கைப் பயன்படுத்தலாம். ஒரு குறிப்பிட்ட நிகழ்வுக்குப் பிறகு அல்லது ஒரு குறிப்பிட்ட நேரத்திற்குப் பிறகு ஊடாடும் தேவைப்படும் கூறுகளுக்கு இது மிகவும் பயனுள்ளதாக இருக்கும்.

உதாரணமாக:

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

function MyComponent() {
  const [isHydrated, setIsHydrated] = useState(false);

  useEffect(() => {
    setIsHydrated(true);
  }, []);

  return (
    

      {isHydrated ? (
         alert('Button Clicked!')}>Click Me
      ) : (
        Loading...
      )}
    
  );
}

இந்த எடுத்துக்காட்டில், `useEffect` ஹூக் இயங்கிய பிறகு மட்டுமே பொத்தான் வழங்கப்பட்டு ஊடாடும் ஆகிறது, இது அதன் நீரேற்றத்தை திறம்பட ஒத்திவைக்கிறது. அதற்கு முன், அது "ஏற்றுகிறது..." என்பதைக் காட்டுகிறது.

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

3. React சர்வர் கூறுகள் (RSC)

React சர்வர் கூறுகள் (RSC) React 18 இல் அறிமுகப்படுத்தப்பட்ட ஒரு அற்புதமான அம்சமாகும், இது கூறுகளை முழுவதுமாக சேவையகத்தில் வழங்க உங்களை அனுமதிக்கிறது. RSC கள் கிளையன்ட் பக்கத்தில் நீரேற்றம் செய்யப்படுவதில்லை, இதன் விளைவாக கணிசமாக சிறிய ஜாவாஸ்கிரிப்ட் மூட்டைகள் மற்றும் மேம்படுத்தப்பட்ட செயல்திறன் கிடைக்கும். மறுபுறம், கிளையன்ட் கூறுகள் வழக்கமான முறையில் நீரேற்றம் செய்யப்படுகின்றன.

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

உதாரணமாக (கருத்தியல்):

// சர்வர் கூறு (நீரேற்றம் இல்லை)
async function ServerComponent() {
  const data = await fetchData(); // சேவையகத்தில் தரவைப் பெறவும்
  return 
{data.name}
;
}

// கிளையன்ட் கூறு (நீரேற்றம் தேவை)
'use client'
import { useState } from 'react';

function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
     setCount(count + 1)}>Count: {count}
  );
}

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

உலகளாவிய சூழல்: RSC கள் உள்ளடக்கம் நிறைந்த பிரிவுகள், தரவு பெறுதல் மற்றும் கிளையன்ட் பக்க ஊடாடும் தேவைப்படாத கூறுகளுக்கு ஏற்றது. Next.js 13 மற்றும் அதற்கு அப்பால் உள்ள கட்டமைப்புகள் RSC களை பெரிதும் பயன்படுத்துகின்றன.

4. மூன்றாம் தரப்பு நூலகங்கள்

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

• `react-hydration-on-demand`: தேவைக்கேற்ப கூறுகளை நீரேற்றம் செய்ய வடிவமைக்கப்பட்ட ஒரு நூலகம்.
• `react-lazy-hydration`: தெரிவுநிலையின் அடிப்படையில் கூறுகளை சோம்பேறியாக ஏற்றுவதற்கும் நீரேற்றம் செய்வதற்கும் ஒரு நூலகம்.

தேர்வுமுறை நீரேற்றத்தை செயல்படுத்த சிறந்த நடைமுறைகள்

தேர்வுமுறை நீரேற்றத்தை திறம்பட பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளை கவனியுங்கள்:

• முக்கியமான கூறுகளை அடையாளம் காணவும்: ஆரம்ப பயனர் அனுபவத்திற்கு அவசியமான கூறுகளை அடையாளம் காண உங்கள் பயன்பாட்டை கவனமாக பகுப்பாய்வு செய்யுங்கள். இந்த நீரேற்றத்திற்கு முன்னுரிமை அளிக்கப்பட வேண்டும். ரெண்டரிங் செயல்திறனை பகுப்பாய்வு செய்ய Chrome DevTools போன்ற கருவிகளைப் பயன்படுத்தவும்.
• அத்தியாவசியமற்ற கூறுகளை ஒத்திவைக்கவும்: உடனடியாகக் காணக்கூடிய அல்லது ஊடாடும் அல்லாத கூறுகளை அடையாளம் கண்டு அவற்றின் நீரேற்றத்தை ஒத்திவைக்கவும்.
• குறியீடு பிரிப்பைப் பயன்படுத்தவும்: ஆரம்ப ஜாவாஸ்கிரிப்ட் மூட்டை அளவைக் குறைக்க குறியீடு பிரிப்பைப் பயன்படுத்தி உங்கள் பயன்பாட்டை சிறிய பகுதிகளாக உடைக்கவும்.
• செயல்திறனை அளவிடவும் மற்றும் கண்காணிக்கவும்: உங்கள் பயன்பாட்டின் செயல்திறனில் தேர்வுமுறை நீரேற்றத்தின் தாக்கத்தைக் கண்காணிக்க செயல்திறன் கண்காணிப்பு கருவிகளைப் பயன்படுத்தவும். ஊடாடும் நேரம் (TTI), முதல் உள்ளடக்க பெயிண்ட் (FCP) மற்றும் பெரிய உள்ளடக்க பெயிண்ட் (LCP) ஆகியவை முக்கிய அளவீடுகளாகும். Google PageSpeed Insights, WebPageTest மற்றும் Lighthouse போன்ற கருவிகள் விலைமதிப்பற்றவை.
• முழுமையாக சோதிக்கவும்: தேர்வுமுறை நீரேற்றம் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த உங்கள் பயன்பாட்டை வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும். எட்ஜ் கேஸ்கள் மற்றும் சாத்தியமான நீரேற்ற பிழைகளுக்கு கவனம் செலுத்துங்கள்.
• அணுகல்தன்மையைக் கவனியுங்கள்: உங்கள் நீரேற்ற உத்தி அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். அணுகக்கூடிய பயனர் அனுபவத்தைப் பராமரிக்க பொருத்தமான ஃபால்பேக் உள்ளடக்கம் மற்றும் ARIA பண்புக்கூறுகளை வழங்கவும்.
• சிக்கலுடன் செயல்திறனை சமநிலைப்படுத்துங்கள்: தேர்வுமுறை நீரேற்றம் செயல்திறனை கணிசமாக மேம்படுத்தினாலும், இது உங்கள் குறியீட்டு தளத்திற்கு சிக்கலையும் சேர்க்கிறது. சேர்க்கப்பட்ட சிக்கலுக்கு எதிராக நன்மைகளை கவனமாக எடைபோட்டு உங்கள் பயன்பாட்டின் தேவைகளின் அடிப்படையில் பொருத்தமான நுட்பங்களைத் தேர்வு செய்யவும்.

உண்மையான உலக எடுத்துக்காட்டுகள் மற்றும் வழக்கு ஆய்வுகள்

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

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

React நீரேற்றத்தில் எதிர்கால போக்குகள்

React நீரேற்றத்தின் எதிர்காலம் பின்வரும் பகுதிகளில் நடந்து வரும் ஆராய்ச்சி மற்றும் வளர்ச்சியால் வடிவமைக்கப்பட வாய்ப்புள்ளது:

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

முடிவுரை

React தேர்வுமுறை நீரேற்றம் என்பது React பயன்பாடுகளின் செயல்திறனை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும். முக்கியமான கூறுகளின் நீரேற்றத்திற்கு முன்னுரிமை அளிப்பதன் மூலமும், குறைவான முக்கியமான கூறுகளின் நீரேற்றத்தை ஒத்திவைப்பதன் மூலமும், ஊடாடும் நேரத்தை (TTI) கணிசமாக மேம்படுத்தலாம், CPU பயன்பாட்டைக் குறைக்கலாம் மற்றும் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்தலாம். React தொடர்ந்து வளர்ச்சியடைந்து வருவதால், தேர்வுமுறை நீரேற்றம் செயல்திறன் மேம்பாட்டு கருவித்தொகுதியின் ஒரு முக்கிய பகுதியாக மாறும்.

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

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