M

MLOG

தமிழ்

வேகமான ஆரம்ப ஏற்றுதல் மற்றும் சிறந்த பயனர் அனுபவத்திற்காக ரியாக்ட் சர்வர் காம்பொனென்ட்ஸ் (RSC) ஸ்ட்ரீமிங்கின் நன்மைகளை ஆராயுங்கள். பகுதி உள்ளடக்க விநியோகம் எவ்வாறு செயல்படுகிறது என்பதை அறிக.

ரியாக்ட் சர்வர் காம்பொனென்ட்ஸ் ஸ்ட்ரீமிங்: மேம்படுத்தப்பட்ட பயனர் அனுபவத்திற்கான பகுதி உள்ளடக்க விநியோகம்

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

ரியாக்ட் சர்வர் காம்பொனென்ட்ஸை (RSC) புரிந்துகொள்ளுதல்

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

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

ஸ்ட்ரீமிங்கின் சக்தி

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

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

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

ரியாக்ட் சர்வர் காம்பொனென்ட்ஸ் ஸ்ட்ரீமிங்கின் நன்மைகள்

RSC-கள் மற்றும் ஸ்ட்ரீமிங்கின் கலவை பல நன்மைகளை வழங்குகிறது:

பகுதி உள்ளடக்க விநியோகம் எவ்வாறு செயல்படுகிறது

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

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

உதாரணம்:

ஒரு பயனர் சுயவிவரத்தைக் காண்பிக்கும் ஒரு காம்பொனென்ட் உங்களிடம் இருப்பதாக வைத்துக்கொள்வோம். சுயவிவரத் தரவை ஒரு தரவுத்தளத்திலிருந்து பெற சிறிது நேரம் ஆகலாம். தரவு பெறப்படும்போது ஒரு ஏற்றுதல் சுழற்சியைக் காண்பிக்க Suspense-ஐப் பயன்படுத்தலாம்:


import React, { Suspense } from 'react';

function UserProfile({ userId }) {
  const userData = fetchUserData(userId); // இது பயனர் தரவைப் பெறுவதாகக் கருதுங்கள்

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>{userData.email}</p>
    </div>
  );
}

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

export default MyComponent;

இந்த எடுத்துக்காட்டில், <Suspense> காம்பொனென்ட் <UserProfile> காம்பொனென்ட்டைப் போர்த்துகிறது. fetchUserData செயல்பாடு பயனர் தரவைப் பெறும்போது, fallback UI (<p>பயனர் சுயவிவரம் ஏற்றப்படுகிறது...</p>) காட்டப்படும். தரவு கிடைத்தவுடன், <UserProfile> காம்பொனென்ட் ரெண்டர் செய்யப்பட்டு பின்னடைவு UI-ஐ மாற்றும்.

ரியாக்ட் சர்வர் காம்பொனென்ட்ஸ் ஸ்ட்ரீமிங்கை செயல்படுத்துதல்

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

  1. ஒரு Next.js திட்டத்தை அமைக்கவும்: உங்களிடம் ஏற்கனவே ஒன்று இல்லையென்றால், create-next-app-ஐப் பயன்படுத்தி ஒரு புதிய Next.js திட்டத்தை உருவாக்கவும்.
  2. சர்வர் காம்பொனென்ட்களை அடையாளம் காணவும்: உங்கள் பயன்பாட்டில் எந்த காம்பொனென்ட்கள் சர்வரில் ரெண்டர் செய்யப்படலாம் என்பதைத் தீர்மானிக்கவும். இவை பொதுவாக தரவைப் பெறும் அல்லது சர்வர் பக்க தர்க்கத்தைச் செய்யும் காம்பொனென்ட்கள். 'use server' டைரக்டிவ் உடன் குறிக்கப்பட்ட காம்பொனென்ட்கள் சர்வரில் மட்டுமே இயங்கும்.
  3. சர்வர் காம்பொனென்ட்களை உருவாக்கவும்: உங்கள் சர்வர் காம்பொனென்ட்களை உருவாக்கவும், கோப்பின் மேலே 'use server' டைரக்டிவ்-ஐப் பயன்படுத்துவதை உறுதிசெய்யவும். இந்த டைரக்டிவ் ரியாக்டிற்கு காம்பொனென்ட் சர்வரில் ரெண்டர் செய்யப்பட வேண்டும் என்று கூறுகிறது.
  4. சர்வர் காம்பொனென்ட்களில் தரவைப் பெறவும்: உங்கள் சர்வர் காம்பொனென்ட்களுக்குள், உங்கள் பின்தள ஆதாரங்களிலிருந்து (தரவுத்தளங்கள், API-கள் போன்றவை) நேரடியாக தரவைப் பெறவும். node-fetch அல்லது உங்கள் தரவுத்தள கிளையன்ட் போன்ற நிலையான தரவு பெறும் நூலகங்களைப் பயன்படுத்தலாம். Next.js சர்வர் காம்பொனென்ட்களில் தரவு பெறுதலுக்கான உள்ளமைக்கப்பட்ட கேச்சிங் வழிமுறைகளை வழங்குகிறது.
  5. ஏற்றுதல் நிலைகளுக்கு சஸ்பென்ஸைப் பயன்படுத்தவும்: உங்கள் பயன்பாட்டின் மெதுவாக ஏற்றப்படக்கூடிய எந்தப் பகுதிகளையும் <Suspense> காம்பொனென்ட்களுடன் போர்த்தி, பொருத்தமான பின்னடைவு UI-களை வழங்கவும்.
  6. ஸ்ட்ரீமிங்கை உள்ளமைக்கவும்: Next.js உங்களுக்காக தானாகவே ஸ்ட்ரீமிங்கைக் கையாளுகிறது. உங்கள் Next.js உள்ளமைவு (next.config.js) ஸ்ட்ரீமிங்கை இயக்க சரியாக அமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
  7. ஒரு சர்வர்லெஸ் சூழலுக்குப் பயன்படுத்தவும்: உங்கள் Next.js பயன்பாட்டை Vercel அல்லது Netlify போன்ற ஒரு சர்வர்லெஸ் சூழலுக்குப் பயன்படுத்தவும், அவை ஸ்ட்ரீமிங்கிற்கு உகந்ததாக உள்ளன.

எடுத்துக்காட்டு Next.js காம்பொனென்ட் (app/product/[id]/page.jsx):


// app/product/[id]/page.jsx
import { Suspense } from 'react';

async function getProduct(id) {
  // ஒரு தரவுத்தளத்திலிருந்து தரவைப் பெறுவதை உருவகப்படுத்துதல்
  await new Promise(resolve => setTimeout(resolve, 1000)); // 1-வினாடி தாமதத்தை உருவகப்படுத்துதல்
  return { id: id, name: `தயாரிப்பு ${id}`, description: `இது தயாரிப்பு எண் ${id}.` };
}

async function ProductDetails({ id }) {
  const product = await getProduct(id);
  return (
    <div>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
    </div>
  );
}

export default async function Page({ params }) {
  const { id } = params;
  return (
    <div>
      <h1>தயாரிப்பு பக்கம்</h1>
      <Suspense fallback={<p>தயாரிப்பு விவரங்கள் ஏற்றப்படுகின்றன...</p>}>
        <ProductDetails id={id} />
      </Suspense>
    </div>
  );
}

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

நிஜ-உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

RSC-கள் மற்றும் ஸ்ட்ரீமிங் குறிப்பாக சிக்கலான UI-கள் மற்றும் மெதுவான தரவு மூலங்களைக் கொண்ட பயன்பாடுகளுக்கு மிகவும் பொருத்தமானவை. இங்கே சில நிஜ-உலக எடுத்துக்காட்டுகள்:

செயல்திறனுக்காக மேம்படுத்துதல்

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

கருத்தில் கொள்ள வேண்டியவை மற்றும் சாத்தியமான குறைபாடுகள்

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

உலகளாவிய கண்ணோட்டங்கள் மற்றும் சிறந்த நடைமுறைகள்

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

முடிவுரை

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

ரியாக்ட் தொடர்ந்து বিকশিত হওয়ার সাথে সাথে, RSC এবং স্ট্রিমিং আরও বেশি প্রচলিত হওয়ার সম্ভাবনা রয়েছে। এই প্রযুক্তিগুলিকে আলিঙ্গন করে, আপনি বক্ররেখার চেয়ে এগিয়ে থাকতে পারেন এবং আপনার ব্যবহারকারীদের ব্যতিক্রমী অভিজ্ঞতা প্রদান করতে পারেন, তারা বিশ্বের যেখানেই থাকুক না কেন।

மேலும் அறிய