ரியாக்ட் சர்வர் காம்போனென்ட்கள்: சர்வர்-சைடு ரெண்டரிங்கின் பரிணாம வளர்ச்சி

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

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

சர்வர்-சைடு ரெண்டரிங்கின் தோற்றம்

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

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

கிளைன்ட்-சைடு ரெண்டரிங்கின் (CSR) எழுச்சி

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

• செழுமையான ஊடாட்டம்: முழு பக்க மறுஏற்றங்கள் இல்லாமல் சிக்கலான UI-கள் மற்றும் தடையற்ற பயனர் ஊடாட்டங்கள்.
• டெவலப்பர் அனுபவம்: ஒற்றை-பக்க பயன்பாடுகளை (SPAs) உருவாக்குவதற்கான ஒரு சீரான மேம்பாட்டு பணிப்பாய்வு.
• மறுபயன்பாடு: காம்போனென்ட்களை உருவாக்கி, பயன்பாட்டின் வெவ்வேறு பகுதிகளில் திறமையாக மீண்டும் பயன்படுத்தலாம்.

அதன் நன்மைகள் இருந்தபோதிலும், CSR அதன் சொந்த சவால்களை அறிமுகப்படுத்தியது, குறிப்பாக ஆரம்ப ஏற்ற செயல்திறன் மற்றும் தேடுபொறி உகப்பாக்கம் (SEO) ஆகியவற்றில்.

தூய கிளைன்ட்-சைடு ரெண்டரிங்கின் சவால்கள்

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

சர்வர்-சைடு ரெண்டரிங்கின் (SSR) மீள்வருகை

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

• ஆரம்ப ஏற்ற செயல்திறனை மேம்படுத்துதல்: சர்வரில் HTML-ஐ முன்கூட்டியே ரெண்டர் செய்வதன் மூலம், பயனர்கள் உள்ளடக்கத்தை மிக வேகமாகப் பார்க்கிறார்கள்.
• SEO-ஐ மேம்படுத்துதல்: தேடுபொறிகள் முன்கூட்டியே ரெண்டர் செய்யப்பட்ட HTML-ஐ எளிதாக கிரால் செய்து அட்டவணையிடலாம்.
• சிறந்த அணுகல்தன்மை: ஜாவாஸ்கிரிப்ட் ஏற்ற அல்லது இயக்கத் தவறினாலும் உள்ளடக்கம் கிடைக்கிறது.

நெக்ஸ்ட்.js போன்ற ஃபிரேம்வொர்க்குகள் SSR-ஐ ரியாக்ட் பயன்பாடுகளுக்கு மேலும் அணுகக்கூடியதாகவும் நடைமுறைக்கு உகந்ததாகவும் மாற்றுவதில் முன்னோடிகளாக மாறின. நெக்ஸ்ட்.js, getServerSideProps மற்றும் getStaticProps போன்ற அம்சங்களை வழங்கியது, இது டெவலப்பர்களை கோரிக்கை நேரத்தில் அல்லது உருவாக்க நேரத்தில் பக்கங்களை முன்கூட்டியே ரெண்டர் செய்ய உதவியது.

'ஹைட்ரேஷன்' சிக்கல்

SSR ஆரம்ப ஏற்றங்களை கணிசமாக மேம்படுத்தியிருந்தாலும், இந்த செயல்முறையில் ஒரு முக்கியமான படி ஹைட்ரேஷன் ஆகும். ஹைட்ரேஷன் என்பது கிளைன்ட்-சைடு ஜாவாஸ்கிரிப்ட் சர்வரில் ரெண்டர் செய்யப்பட்ட HTML-ஐ 'கையகப்படுத்தி' அதை ஊடாட வைக்கும் செயல்முறையாகும். இதில் அடங்குவன:

1. சர்வர் HTML-ஐ அனுப்புகிறது.
2. உலாவி HTML-ஐ ரெண்டர் செய்கிறது.
3. உலாவி ஜாவாஸ்கிரிப்ட் பண்டிலைப் பதிவிறக்குகிறது.
4. ஜாவாஸ்கிரிப்ட் பண்டில் பாகுபடுத்தப்பட்டு இயக்கப்படுகிறது.
5. ஜாவாஸ்கிரிப்ட் ஏற்கனவே ரெண்டர் செய்யப்பட்ட HTML கூறுகளுக்கு நிகழ்வு கேட்பான்களை இணைக்கிறது.

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

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

ரியாக்ட் சர்வர் காம்போனென்ட்கள் (RSC) அறிமுகம்

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

RSC-க்குப் பின்னால் உள்ள அடிப்படைக் கருத்து, உங்கள் பயன்பாட்டை இரண்டு வகையான காம்போனென்ட்களாகப் பிரிப்பதாகும்:

1. சர்வர் காம்போனென்ட்கள்: இந்த காம்போனென்ட்கள் பிரத்தியேகமாக சர்வரில் ரெண்டர் ஆகின்றன. அவை சர்வரின் வளங்களுக்கு (தரவுத்தளங்கள், கோப்பு அமைப்புகள், API-கள்) நேரடி அணுகலைக் கொண்டுள்ளன மற்றும் கிளைன்ட்டிற்கு அனுப்பப்பட வேண்டியதில்லை. அவை தரவைப் பெறுவதற்கும் நிலையான அல்லது அரை-டைனமிக் உள்ளடக்கத்தை ரெண்டர் செய்வதற்கும் ஏற்றவை.
2. கிளைன்ட் காம்போனென்ட்கள்: இவை கிளைன்ட்டில் ரெண்டர் ஆகும் பாரம்பரிய ரியாக்ட் காம்போனென்ட்கள். அவை 'use client' வழிகாட்டுதலுடன் குறிக்கப்பட்டுள்ளன. அவை நிலை மேலாண்மை (useState, useReducer), எஃபெக்ட்கள் (useEffect), மற்றும் நிகழ்வு கேட்பான்கள் போன்ற ரியாக்ட்டின் ஊடாடும் அம்சங்களைப் பயன்படுத்தலாம்.

RSC-இன் முக்கிய அம்சங்கள் மற்றும் நன்மைகள்

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

1. குறைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் பண்டில் அளவு: சர்வர் காம்போனென்ட்கள் முழுமையாக சர்வரில் இயங்குவதால், அவற்றின் குறியீடு ஒருபோதும் கிளைன்ட்டிற்கு அனுப்பப்படுவதில்லை. இது உலாவி பதிவிறக்கம் செய்து இயக்க வேண்டிய ஜாவாஸ்கிரிப்டின் அளவை வியத்தகு முறையில் குறைக்கிறது, இது வேகமான ஆரம்ப ஏற்றங்களுக்கும் மேம்பட்ட செயல்திறனுக்கும் வழிவகுக்கிறது, குறிப்பாக மொபைல் சாதனங்களில்.
   எடுத்துக்காட்டு: ஒரு தரவுத்தளத்திலிருந்து தயாரிப்புத் தரவைப் பெற்று அதைக் காண்பிக்கும் ஒரு காம்போனென்ட் ஒரு சர்வர் காம்போனென்ட்டாக இருக்கலாம். இதன் விளைவாக வரும் HTML மட்டுமே அனுப்பப்படுகிறது, தரவைப் பெற்று ரெண்டர் செய்வதற்கான ஜாவாஸ்கிரிப்ட் அல்ல.
2. நேரடி சர்வர் அணுகல்: சர்வர் காம்போனென்ட்கள் தரவுத்தளங்கள், கோப்பு அமைப்புகள் அல்லது உள் API-கள் போன்ற பின்தள வளங்களை ஒரு தனி API இறுதிப்புள்ளி மூலம் வெளிப்படுத்தத் தேவையில்லாமல் நேரடியாக அணுகலாம். இது தரவுப் பெறுதலை எளிதாக்குகிறது மற்றும் உங்கள் பின்தள உள்கட்டமைப்பின் சிக்கலைக் குறைக்கிறது.
   எடுத்துக்காட்டு: ஒரு உள்ளூர் தரவுத்தளத்திலிருந்து பயனர் சுயவிவரத் தகவலைப் பெறும் ஒரு காம்போனென்ட், அதை சர்வர் காம்போனென்ட்டிற்குள் நேரடியாகச் செய்யலாம், கிளைன்ட்-சைடு API அழைப்பின் தேவையை நீக்குகிறது.
3. ஹைட்ரேஷன் தடைகளை நீக்குதல்: சர்வர் காம்போனென்ட்கள் சர்வரில் ரெண்டர் செய்யப்பட்டு அவற்றின் வெளியீடு நிலையான HTML என்பதால், கிளைன்ட் அவற்றை "ஹைட்ரேட்" செய்ய வேண்டிய அவசியமில்லை. இதன் பொருள், கிளைன்ட்-சைடு ஜாவாஸ்கிரிப்ட் ஊடாடும் கிளைன்ட் காம்போனென்ட்களுக்கு மட்டுமே பொறுப்பாகும், இது ஒரு மென்மையான மற்றும் வேகமான ஊடாடும் அனுபவத்திற்கு வழிவகுக்கிறது.
   எடுத்துக்காட்டு: ஒரு சர்வர் காம்போனென்ட்டால் ரெண்டர் செய்யப்பட்ட ஒரு சிக்கலான தளவமைப்பு HTML-ஐப் பெற்றவுடன் உடனடியாகத் தயாராக இருக்கும். அந்த தளவமைப்பிற்குள் உள்ள ஊடாடும் பொத்தான்கள் அல்லது படிவங்கள், கிளைன்ட் காம்போனென்ட்களாகக் குறிக்கப்பட்டவை, மட்டுமே ஹைட்ரேஷன் தேவைப்படும்.
4. மேம்படுத்தப்பட்ட செயல்திறன்: ரெண்டரிங்கை சர்வருக்கு மாற்றுவதன் மூலமும், கிளைன்ட்-சைடு ஜாவாஸ்கிரிப்டைக் குறைப்பதன் மூலமும், RSC-கள் வேகமான டைம் டு இன்டராக்டிவ் (TTI) மற்றும் சிறந்த ஒட்டுமொத்த பக்க செயல்திறனுக்கு பங்களிக்கின்றன.
5. மேம்படுத்தப்பட்ட டெவலப்பர் அனுபவம்: சர்வர் மற்றும் கிளைன்ட் காம்போனென்ட்களுக்கு இடையிலான தெளிவான பிரிப்பு கட்டமைப்பை எளிதாக்குகிறது. டெவலப்பர்கள் தரவுப் பெறுதல் மற்றும் ஊடாட்டம் எங்கு நடக்க வேண்டும் என்பதைப் பற்றி எளிதாக பகுத்தறியலாம்.
   எடுத்துக்காட்டு: டெவலப்பர்கள் தரவுப் பெறும் தர்க்கத்தை சர்வர் காம்போனென்ட்களுக்குள் நம்பிக்கையுடன் வைக்கலாம், அது கிளைன்ட் பண்டிலைப் பெரிதாக்காது என்பதை அறிந்து. ஊடாடும் கூறுகள் 'use client' உடன் வெளிப்படையாகக் குறிக்கப்பட்டுள்ளன.
6. காம்போனென்ட் கோ-லொகேஷன்: சர்வர் காம்போனென்ட்கள் தரவுப் பெறும் தர்க்கத்தை அதைப் பயன்படுத்தும் காம்போனென்ட்களுடன் இணைக்க அனுமதிக்கின்றன, இது சுத்தமான மற்றும் மேலும் ஒழுங்கமைக்கப்பட்ட குறியீட்டிற்கு வழிவகுக்கிறது.

ரியாக்ட் சர்வர் காம்போனென்ட்கள் எப்படி வேலை செய்கின்றன

ரியாக்ட் சர்வர் காம்போனென்ட்கள் சர்வர் மற்றும் கிளைன்ட் இடையே தொடர்பு கொள்ள ஒரு சிறப்பு வரிசைப்படுத்தல் வடிவத்தைப் பயன்படுத்துகின்றன. RSC-களைப் பயன்படுத்தும் ஒரு ரியாக்ட் பயன்பாடு கோரப்படும்போது:

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

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

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

RSC-களின் ஆற்றலை விளக்க ஒரு வழக்கமான மின்-வணிக தயாரிப்பு பக்கத்தை கருத்தில் கொள்வோம்.

சூழல்: மின்-வணிக தயாரிப்பு பக்கம்

ஒரு தயாரிப்பு பக்கம் பொதுவாக பின்வருவனவற்றை உள்ளடக்கியது:

• தயாரிப்பு விவரங்கள் (பெயர், விளக்கம், விலை)
• தயாரிப்பு படங்கள்
• வாடிக்கையாளர் விமர்சனங்கள்
• கார்ட்டில் சேர் பொத்தான்
• தொடர்புடைய தயாரிப்புகள் பகுதி

ரியாக்ட் சர்வர் காம்போனென்ட்களுடன்:

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

  // components/ProductDetails.server.jsx
  async function ProductDetails({ productId }) {
    const product = await getProductFromDatabase(productId);
    const reviews = await getReviewsForProduct(productId);
  
    return (
      
  
        
  {product.name}
        
  {product.description}
        
  Price: ${product.price}
        
  Reviews
        
  
          {reviews.map(review => 
  {review.text}
  )}
        
      
    );
  }
  
  export default ProductDetails;
  

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

  // components/AddToCartButton.client.jsx
  'use client';
  
  import { useState } from 'react';
  
  function AddToCartButton({ productId }) {
    const [quantity, setQuantity] = useState(1);
    const [isAdding, setIsAdding] = useState(false);
  
    const handleAddToCart = async () => {
      setIsAdding(true);
      // கார்ட்டில் பொருளைச் சேர்க்க API-ஐ அழைக்கவும்
      await addToCartApi(productId, quantity);
      setIsAdding(false);
      alert('பொருள் கார்ட்டில் சேர்க்கப்பட்டது!');
    };
  
    return (
      
  
         setQuantity(parseInt(e.target.value, 10))}
          min="1"
        />
        
          {isAdding ? 'சேர்க்கப்படுகிறது...' : 'கார்ட்டில் சேர்'}
        
      
    );
  }
  
  export default AddToCartButton;
  

• தொடர்புடைய தயாரிப்புகள் (சர்வர் காம்போனென்ட்): தொடர்புடைய தயாரிப்புகளைக் காண்பிக்கும் ஒரு பகுதியும் சர்வர் காம்போனென்ட்டாக இருக்கலாம், சர்வரிலிருந்து தரவைப் பெறுகிறது.

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

முக்கிய கருத்துக்கள் மற்றும் வழிகாட்டுதல்கள்

ரியாக்ட் சர்வர் காம்போனென்ட்களுடன் பணிபுரியும் போது பின்வரும் வழிகாட்டுதல்கள் மற்றும் கருத்துக்களைப் புரிந்துகொள்வது முக்கியம்:

• 'use client' வழிகாட்டுதல்: ஒரு கோப்பின் மேலே உள்ள இந்த சிறப்பு கருத்து, ஒரு காம்போனென்ட்டையும் அதன் அனைத்து சந்ததியினரையும் கிளைன்ட் காம்போனென்ட்களாகக் குறிக்கிறது. ஒரு சர்வர் காம்போனென்ட் ஒரு கிளைன்ட் காம்போனென்ட்டை இறக்குமதி செய்தால், அந்த இறக்குமதி செய்யப்பட்ட காம்போனென்ட்டும் அதன் குழந்தைகளும் கூட கிளைன்ட் காம்போனென்ட்களாக இருக்க வேண்டும்.
• இயல்பாக சர்வர் காம்போனென்ட்கள்: RSC-ஐ ஆதரிக்கும் சூழல்களில் (நெக்ஸ்ட்.js App Router போன்றவை), காம்போனென்ட்கள் 'use client' உடன் வெளிப்படையாகக் குறிக்கப்படாவிட்டால், அவை இயல்பாக சர்வர் காம்போனென்ட்களாக இருக்கும்.
• ப்ராப்ஸ் அனுப்புதல்: சர்வர் காம்போனென்ட்கள் கிளைன்ட் காம்போனென்ட்களுக்கு ப்ராப்ஸ்களை அனுப்பலாம். இருப்பினும், ப்ரிமிட்டிவ் ப்ராப்ஸ்கள் (சரங்கள், எண்கள், பூலியன்கள்) வரிசைப்படுத்தப்பட்டு திறமையாக அனுப்பப்படுகின்றன. சிக்கலான பொருள்கள் அல்லது செயல்பாடுகளை சர்வரிலிருந்து கிளைன்ட் காம்போனென்ட்களுக்கு நேரடியாக அனுப்ப முடியாது, மேலும் செயல்பாடுகளை கிளைன்ட்டிலிருந்து சர்வர் காம்போனென்ட்களுக்கு அனுப்ப முடியாது.
• சர்வர் காம்போனென்ட்களில் ரியாக்ட் நிலை அல்லது எஃபெக்ட்கள் இல்லை: சர்வர் காம்போனென்ட்கள் useState, useEffect போன்ற ரியாக்ட் ஹூக்குகளையோ அல்லது onClick போன்ற நிகழ்வு கையாளிகளையோ பயன்படுத்த முடியாது, ஏனெனில் அவை கிளைன்ட்டில் ஊடாடும் தன்மை கொண்டவை அல்ல.
• தரவுப் பெறுதல்: சர்வர் காம்போனென்ட்களில் தரவுப் பெறுதல் பொதுவாக நிலையான async/await முறைகளைப் பயன்படுத்தி, சர்வர் வளங்களை நேரடியாக அணுகுவதன் மூலம் செய்யப்படுகிறது.

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

ரியாக்ட் சர்வர் காம்போனென்ட்களை ஏற்றுக்கொள்ளும்போது, உலகளாவிய தாக்கங்கள் மற்றும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்வது அவசியம்:

• CDN கேச்சிங்: சர்வர் காம்போனென்ட்கள், குறிப்பாக நிலையான உள்ளடக்கத்தை ரெண்டர் செய்பவை, உள்ளடக்க விநியோக நெட்வொர்க்குகளில் (CDNs) திறம்பட கேச் செய்யப்படலாம். இது உலகெங்கிலும் உள்ள பயனர்கள் புவியியல் ரீதியாக நெருக்கமான, வேகமான பதில்களைப் பெறுவதை உறுதி செய்கிறது.
  எடுத்துக்காட்டு: அடிக்கடி மாறாத தயாரிப்புப் பட்டியல் பக்கங்களை CDN-கள் மூலம் கேச் செய்யலாம், இது சர்வர் சுமையை கணிசமாகக் குறைத்து சர்வதேச பயனர்களுக்கான தாமதத்தை மேம்படுத்துகிறது.
• சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n): சர்வர் காம்போனென்ட்கள் i18n-க்கு சக்திவாய்ந்தவையாக இருக்கலாம். பயனரின் கோரிக்கை தலைப்புகளின் அடிப்படையில் (எ.கா., Accept-Language) சர்வரில் வட்டார-குறிப்பிட்ட தரவைப் பெறலாம். இதன் பொருள், மொழிபெயர்க்கப்பட்ட உள்ளடக்கம் மற்றும் உள்ளூர்மயமாக்கப்பட்ட தரவு (நாணயம், தேதிகள் போன்றவை) பக்கம் கிளைன்ட்டிற்கு அனுப்பப்படுவதற்கு முன்பு சர்வரில் ரெண்டர் செய்யப்படலாம்.
  எடுத்துக்காட்டு: ஒரு உலகளாவிய செய்தி இணையதளம், பயனரின் உலாவி அல்லது IP முகவரியின் கண்டறியப்பட்ட மொழியின் அடிப்படையில் செய்தி கட்டுரைகளையும் அவற்றின் மொழிபெயர்ப்புகளையும் பெற சர்வர் காம்போனென்ட்களைப் பயன்படுத்தலாம், தொடக்கத்திலிருந்தே மிகவும் பொருத்தமான உள்ளடக்கத்தை வழங்குகிறது.
• பல்வேறு நெட்வொர்க்குகளுக்கான செயல்திறன் உகப்பாக்கம்: கிளைன்ட்-சைடு ஜாவாஸ்கிரிப்டைக் குறைப்பதன் மூலம், RSC-கள் மெதுவான அல்லது நம்பகத்தன்மையற்ற நெட்வொர்க் இணைப்புகளில் இயல்பாகவே அதிக செயல்திறன் கொண்டவை, இது உலகின் பல பகுதிகளில் பொதுவானது. இது உள்ளடக்கிய வலை அனுபவங்களை உருவாக்கும் இலக்குடன் ஒத்துப்போகிறது.
• அங்கீகாரம் மற்றும் அங்கீகாரமளிப்பு: முக்கியமான செயல்பாடுகள் அல்லது தரவு அணுகல் நேரடியாக சர்வர் காம்போனென்ட்களுக்குள் நிர்வகிக்கப்படலாம், பயனர் அங்கீகாரம் மற்றும் அங்கீகாரச் சரிபார்ப்புகள் சர்வரில் நடப்பதை உறுதிசெய்து, பாதுகாப்பை மேம்படுத்துகிறது. இது பல்வேறு தனியுரிமை விதிமுறைகளைக் கையாளும் உலகளாவிய பயன்பாடுகளுக்கு முக்கியமானது.
  எடுத்துக்காட்டு: ஒரு டாஷ்போர்டு பயன்பாடு, பயனர் சர்வர்-சைடில் அங்கீகரிக்கப்பட்ட பின்னரே பயனர்-குறிப்பிட்ட தரவைப் பெற சர்வர் காம்போனென்ட்களைப் பயன்படுத்தலாம்.
• முற்போக்கான மேம்பாடு: RSC-கள் ஒரு சக்திவாய்ந்த சர்வர்-முதல் அணுகுமுறையை வழங்கினாலும், முற்போக்கான மேம்பாட்டை கருத்தில் கொள்வது இன்னும் ஒரு நல்ல நடைமுறையாகும். ஜாவாஸ்கிரிப்ட் தாமதமானாலும் அல்லது தோல்வியுற்றாலும் முக்கியமான செயல்பாடு கிடைப்பதை உறுதி செய்யுங்கள், இதற்கு சர்வர் காம்போனென்ட்கள் உதவுகின்றன.
• கருவி மற்றும் ஃபிரேம்வொர்க் ஆதரவு: நெக்ஸ்ட்.js போன்ற ஃபிரேம்வொர்க்குகள் RSC-களை ஏற்றுக்கொண்டுள்ளன, வலுவான கருவிகளையும் தத்தெடுப்பதற்கான தெளிவான பாதையையும் வழங்குகின்றன. நீங்கள் தேர்ந்தெடுத்த ஃபிரேம்வொர்க் RSC-களை திறம்பட செயல்படுத்துவதற்கு போதுமான ஆதரவையும் வழிகாட்டுதலையும் வழங்குகிறது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

RSC உடன் சர்வர்-சைடு ரெண்டரிங்கின் எதிர்காலம்

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

இந்த பரிணாம வளர்ச்சி பின்வருவனவற்றை நோக்கமாகக் கொண்டுள்ளது:

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

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

முடிவுரை

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

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

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