React சர்வர் ஆக்சன் ரெஸ்பான்ஸ் ஸ்ட்ரீமிங்: மேம்பட்ட UX-க்காக படிவப் பதில்களைப் படிப்படியாக வழங்குதல்

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

React சர்வர் ஆக்சன்களைப் புரிந்துகொள்ளுதல்

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

• மேம்படுத்தப்பட்ட பாதுகாப்பு: சர்வர் ஆக்சன்கள் நேரடியாக சர்வரில் இயங்குவதால், முக்கியமான தரவு அல்லது லாஜிக் கிளைன்ட்டுக்கு வெளிப்படும் அபாயத்தைக் குறைக்கிறது.
• குறைக்கப்பட்ட பாய்லர்பிளேட்: அவை கிளைன்ட்டில் தனி API வழிகள் மற்றும் தரவுப் பெறுதல் லாஜிக்கிற்கான தேவையை நீக்குகின்றன.
• மேம்பட்ட செயல்திறன்: அவை வேகமான ஆரம்ப ஏற்றுதல் நேரங்கள் மற்றும் மேம்பட்ட செயல்திறனுக்காக சர்வர்-சைட் ரெண்டரிங் (SSR) மற்றும் கேச்சிங்கை பயன்படுத்தலாம்.
• வகை பாதுகாப்பு: TypeScript உடன், சர்வர் ஆக்சன்கள் முழுமையான வகை பாதுகாப்பை வழங்குகின்றன, கிளைன்ட் மற்றும் சர்வருக்கு இடையில் தரவு நிலைத்தன்மையை உறுதி செய்கின்றன.

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

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

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

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

React சர்வர் ஆக்சன்களுடன் படிப்படியான படிவப் பதிலை எவ்வாறு செயல்படுத்துவது என்பதற்கான ஒரு எடுத்துக்காட்டைப் பார்ப்போம்.

எடுத்துக்காட்டு: ஒரு நிகழ்நேர நாணய மாற்றி

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

1. சர்வர் ஆக்சனை அமைத்தல்

முதலில், நாணய மாற்றத்தைக் கையாளும் சர்வர் ஆக்சனை வரையறுக்கிறோம்.

// server/actions.ts
'use server';

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // Simulate fetching exchange rate from an external API
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
  if (fromCurrency === 'USD' && toCurrency === 'EUR') return 0.92;
  if (fromCurrency === 'EUR' && toCurrency === 'USD') return 1.09;
  if (fromCurrency === 'USD' && toCurrency === 'JPY') return 145;
  if (fromCurrency === 'JPY' && toCurrency === 'USD') return 0.0069;
  throw new Error(`Exchange rate not found for ${fromCurrency} to ${toCurrency}`);
}

export const convertCurrency = async (prevState: any, formData: FormData) => {
  const fromCurrency = formData.get('fromCurrency') as string;
  const toCurrency = formData.get('toCurrency') as string;
  const amount = Number(formData.get('amount'));

  try {
    if (!fromCurrency || !toCurrency || isNaN(amount)) {
      return { message: 'Please provide valid input.' };
    }

    // Simulate streaming the response
    await new Promise(resolve => setTimeout(resolve, 250));
    const exchangeRate = await unstable_cache(
      async () => getExchangeRate(fromCurrency, toCurrency),
      [`exchange-rate-${fromCurrency}-${toCurrency}`],
      { tags: [`exchange-rate-${fromCurrency}-${toCurrency}`] }
    )();

    await new Promise(resolve => setTimeout(resolve, 250));
    const convertedAmount = amount * exchangeRate;

    return { message: `Converted amount: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'Failed to convert currency.' };
  }
};

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

2. React கூறினை செயல்படுத்துதல்

அடுத்து, சர்வர் ஆக்சனைப் பயன்படுத்தும் React கூறினை உருவாக்குகிறோம்.

// app/page.tsx
'use client';

import { useState, useTransition } from 'react';
import { convertCurrency } from './server/actions';
import { useFormState } from 'react-dom';

export default function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState('');
  const [isPending, startTransition] = useTransition();
  const [state, formAction] = useFormState(convertCurrency, { message: '' });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    startTransition(() => {
      formAction(new FormData(event.target as HTMLFormElement));
    });
  };

  return (
    <div>
      <h2>Real-Time Currency Converter</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">From:</label>
        <select id="fromCurrency" name="fromCurrency" value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="toCurrency">To:</label>
        <select id="toCurrency" name="toCurrency" value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="amount">Amount:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? 'Converting...' : 'Convert'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

முக்கிய குறிப்புகள்:

• படிவ நிலையை நிர்வகிக்கவும், சர்வர் ஆக்சனை அழைக்கவும் useFormState ஹூக்கைப் பயன்படுத்துகிறோம்.
• useTransition இலிருந்து வரும் isPending நிலை, செயல்பாடு இயங்கும்போது சமர்ப்பிப்பு பொத்தானை முடக்கி, "மாற்றப்படுகிறது..." என்ற செய்தியைக் காட்டுகிறது, இது பயனருக்கு பின்னூட்டம் அளிக்கிறது.
• useFormState வழங்கும் formAction செயல்பாடு தானாகவே படிவச் சமர்ப்பிப்பைக் கையாண்டு, சர்வர் ஆக்சனிலிருந்து வரும் பதிலுடன் நிலையைப் புதுப்பிக்கிறது.

3. படிப்படியான புதுப்பிப்புகளைப் புரிந்துகொள்ளுதல்

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

1. சமர்ப்பிப்பு பொத்தான் கிட்டத்தட்ட உடனடியாக "மாற்றப்படுகிறது..." என்று மாறுகிறது.
2. ஒரு குறுகிய தாமதத்திற்குப் பிறகு (250ms), குறியீடு மாற்று விகிதத்தைப் பெறுவதை உருவகப்படுத்துகிறது.
3. மாற்றப்பட்ட தொகை கணக்கிடப்பட்டு, முடிவு கிளைன்ட்டுக்குத் திருப்பி அனுப்பப்படுகிறது.
4. React கூறில் உள்ள state.message புதுப்பிக்கப்பட்டு, மாற்றப்பட்ட தொகையைக் காட்டுகிறது.

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

படிப்படியான படிவப் பதிலின் நன்மைகள்

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

மேம்பட்ட நுட்பங்கள்

1. உடனடி UI புதுப்பிப்புகளுக்கு `useOptimistic` ஐப் பயன்படுத்துதல்

useOptimistic ஹூக், சர்வர் ஆக்சன் முடிவடைவதற்கு முன்பு UI-ஐ நம்பிக்கையுடன் புதுப்பிக்க உங்களை அனுமதிக்கிறது. இது இன்னும் வேகமான உணரப்பட்ட பதிலளிப்பு நேரத்தை வழங்க முடியும், ஏனெனில் UI உடனடியாக எதிர்பார்க்கப்படும் முடிவைப் பிரதிபலிக்கிறது.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Return the new state based on the update
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: 'optimistic update' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

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

2. பிழை கையாளுதல் மற்றும் ஃபால்பேக் வழிமுறைகளை செயல்படுத்துதல்

சர்வர் ஆக்சன் தோல்வியுற்றால் அல்லது நெட்வொர்க் இணைப்பு துண்டிக்கப்பட்டால், வலுவான பிழை கையாளுதல் மற்றும் ஃபால்பேக் வழிமுறைகளை செயல்படுத்துவது முக்கியம். சர்வர் ஆக்சனுக்குள் try...catch பிளாக்கைப் பயன்படுத்தி பிழைகளைப் பிடித்து, கிளைன்ட்டுக்கு பொருத்தமான பிழை செய்தியைத் திருப்பலாம்.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'An error occurred while converting the currency. Please try again later.' };
  }
};

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

3. செயல்திறனுக்காக மாற்று விகிதங்களைக் கேச்சிங் செய்தல்

ஒரு வெளிப்புற API இலிருந்து மாற்று விகிதங்களைப் பெறுவது செயல்திறன் தடையாக இருக்கலாம். செயல்திறனை மேம்படுத்த, Redis அல்லது Memcached போன்ற ஒரு கேச்சிங் பொறிமுறையைப் பயன்படுத்தி மாற்று விகிதங்களைக் கேச் செய்யலாம். Next.js இன் unstable_cache (எடுத்துக்காட்டில் பயன்படுத்தப்பட்டது) ஒரு உள்ளமைக்கப்பட்ட கேச்சிங் தீர்வை வழங்குகிறது. மாற்று விகிதங்கள் புதுப்பித்த நிலையில் இருப்பதை உறுதிசெய்ய, கேச்சை அவ்வப்போது செல்லாததாக்க நினைவில் கொள்ளுங்கள்.

4. சர்வதேசமயமாக்கல் பரிசீலனைகள்

ஒரு உலகளாவிய பார்வையாளர்களுக்காக பயன்பாடுகளை உருவாக்கும்போது, சர்வதேசமயமாக்கலை (i18n) கருத்தில் கொள்வது முக்கியம். இதில் அடங்குவன:

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

Intl மற்றும் react-intl போன்ற நூலகங்கள் உங்கள் React பயன்பாடுகளில் i18n ஐச் செயல்படுத்த உங்களுக்கு உதவலாம்.

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

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

முடிவுரை

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

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

மேலும் ஆய்வு

• Next.js சர்வர் ஆக்சன்கள் ஆவணப்படுத்தல்
• React அதிகாரப்பூர்வ ஆவணப்படுத்தல்
• ஸ்ட்ரீம்ஸ் API

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