கடந்த சில வாரங்களில், ரியாக்ட் சர்வர் உபகரணங்களில் (RSC) ஒரு முக்கியமான பாதுகாப்பு பாதிப்பு வெளிப்பட்டதைத் தொடர்ந்து, RSC நெறிமுறை அதிக கவனத்தைப் பெற்றுள்ளது.
RSC நெறிமுறை என்பது ரியாக்ட் மரங்கள் (மற்றும் JSON வரிசைகள்) வரிசைப்படுத்தப்பட்ட மற்றும் ரியாக்ட் மூலம் வரிசைப்படுத்தப்பட்ட வடிவமாகும். RSC நெறிமுறைக்கு ரியாக்ட் ஒரு எழுத்தாளர் மற்றும் வாசகர் ஆகிய இரண்டையும் வழங்குகிறது, இது ஒன்றுக்கொன்று பதிப்பு மற்றும் உருவாகலாம்.
ஏனெனில் RSC நெறிமுறை ஒன்றுதான் செயல்படுத்தல் விவரங்கள் எதிர்வினை, இது மூலக் குறியீட்டிற்கு வெளியே தெளிவாக ஆவணப்படுத்தப்படவில்லை. இந்த அணுகுமுறையின் நன்மை என்னவென்றால், ரியாக்ட் வடிவமைப்பை மேம்படுத்தவும் புதிய அம்சங்களையும் மேம்படுத்தல்களையும் சேர்க்க பல வாய்ப்புகளை கொண்டுள்ளது.
இருப்பினும், எதிர்மறையான அம்சம் என்னவென்றால், ரியாக்ட் சர்வர் கூறுகளுடன் செயலில் செயலிகளை உருவாக்கும் நபர்களுக்கு கூட, அது எப்படி வேலை செய்கிறது என்பது தெரியாது.
சில மாதங்களுக்கு முன்பு, RSC நெறிமுறையின் பின்னணியில் உள்ள சில யோசனைகளை விளக்குவதற்கு நான் Progressive JSON எழுதினேன். RSC ஐப் பயன்படுத்த நீங்கள் அவர்களைத் தெரிந்து கொள்ள வேண்டிய அவசியமில்லை என்றாலும், பேட்டைக்குக் கீழே பார்ப்பது மிகவும் வேடிக்கையாகவும் கல்வியாகவும் இருக்கும் நிகழ்வுகளில் இதுவும் ஒன்று என்று நினைக்கிறேன்.
இப்போது மிகவும் கவனத்தை ஈர்க்கும் சூழ்நிலை வேறுபட்டதாக இருக்க விரும்புகிறேன், ஆனால் எப்படியிருந்தாலும், அந்த ஆர்வம் என்னை ஒரு புதிய சிறிய கருவியை உருவாக்க தூண்டியது அது எவ்வாறு செயல்படுகிறது என்பதைக் காட்ட.
நான் அதை அழைக்கிறேன் RSC எக்ஸ்ப்ளோரர்மற்றும் நீங்கள் அதை செய்ய முடியும் https://rscexplorer.dev/.
வெளிப்படையாக, இது திறந்த மூலமாகும்.
“காட்டு, சொல்லாதே”, அவர்கள் சொல்வது போல். சரி, அது ஒரு உட்பொதியாக உள்ளது.
ஹலோ வேர்ல்டில் தொடங்குவோம்:
ஏதோ ரகசியம் சொல்லும் மஞ்சள் கோடு ஹைலைட் செய்யப்பட்டிருப்பதைக் கவனியுங்கள். கூர்ந்து கவனித்தால், அது represented as a piece of JSON. This line is a part of the RSC stream from the server. That’s how React talks to itself over the network.
Now press the big yellow “step” button!
Notice how now appears on the right. This is the JSX that the client reconstructs after reading this line. We’ve just seen a simple piece of JSX—the tag—cross the network and get revived on the other side.
Well, not really “cross the network”.
One cool thing about RSC Explorer is that it’s a single-page app, i.e. it runs entirely in your browser (more precisely, the Server part runs in a worker). This is why, if you check the Network tab, you’ll see no requests. So in a sense it’s a simulation.
Nevertheless, RSC Explorer is built using exactly the same packages that React provides to read and write the RSC protocol, so every line of the output is real.
Let’s try something slightly more interesting to see streaming in action.
Take this example and press the big yellow “step” button exactly two times:
(If you miscounted, press “restart” on the left, and then “step” two times again.)
Have a look at the upper right pane. You can see three chunks in the RSC protocol format (which, again, you don’t technically need to read—and which changes between versions). On the right, you see what Client React reconstructed so far.
Notice a “hole” in the middle of the streamed tree, visualized as a “Pending” pill.
By default, React would not show an inconsistent UI with “holes”. However, since you’ve declared a loading state with is already visible but
"படி" பொத்தானை மீண்டும் அழுத்தவும், "துளை" நிரப்பப்படும்.
இதுவரை, நாங்கள் மட்டுமே அனுப்பியுள்ளோம் தகவல் வாடிக்கையாளருக்கு; இப்போது கொஞ்சம் அனுப்புவோம் குறியீடு.
ஒரு கால்குலேட்டரை ஒரு உன்னதமான உதாரணமாகப் பயன்படுத்துவோம்.
பெரிய மஞ்சள் "படி" பொத்தானை இருமுறை கிளிக் செய்யவும்:
இது ஒரு நல்ல பழைய கால்குலேட்டர், இங்கே ஆடம்பரமாக எதுவும் இல்லை.
அல்லது இருக்கிறதா?
மேல்நிலை நெறிமுறையைப் பார்க்கவும். படிக்க சற்று கடினமாக உள்ளது, ஆனால் நாம் சரத்தை அனுப்பவில்லை என்பதை கவனியுங்கள் "Count: 0" அல்லது கள், அல்லது ஏதேனும் HTML. நாங்கள் அனுப்புகிறோம்
ஏபிஐ வழித்தடங்களிலிருந்து ரியாக்ட் மரங்களை இப்படித்தான் திருப்பித் தருகிறோம்.
எப்படி என்பதைக் கவனியுங்கள் Counter ஒரு குறிப்பு ஆகிறது ["client",[],"Counter"] RSC நெறிமுறையில், "பிடித்துக்கொள்ளுங்கள் Counter இருந்து ஏற்றுமதி client தொகுதி". உண்மையான கட்டமைப்பில், இது பண்ட்லரால் செய்யப்படுகிறது, எனவே ஆர்எஸ்சி தொகுப்புகளுடன் ஒருங்கிணைக்கிறது. நீங்கள் வெப்பேக்கைப் பற்றி நன்கு அறிந்திருந்தால், இது வெப்பேக் தற்காலிக சேமிப்பிலிருந்து படிப்பதைப் போன்றது. (உண்மையில் RSC எக்ஸ்ப்ளோரர் இதை செயல்படுத்துகிறது.)
இப்போது சர்வரைப் பார்த்தோம் குறிக்கிறது கிளையண்டால் வெளிப்படுத்தப்பட்ட குறியீட்டின் ஒரு பகுதிக்கு.
இப்போது வாடிக்கையாளரைப் பார்ப்போம் குறிக்கிறது சேவையகத்தால் வெளிப்படுத்தப்பட்ட குறியீட்டின் ஒரு பகுதிக்கு.
இங்கே, greet என்பது ஒரு சர்வர் நடவடிக்கைஉடன் 'use server' ஒரு இறுதி புள்ளியாக. இது வாடிக்கையாளருக்கு ஆதரவாக வழங்கப்படுகிறது Form அது ஒன்று என்று கூறு async செயல்பாடு
பெரிய மஞ்சள் "படி" பொத்தானை மூன்று முறை கிளிக் செய்யவும்:
இப்போது முன்னோட்ட பேனலில் உங்கள் பெயரை உள்ளிட்டு "ஹலோ" என்பதைக் கிளிக் செய்யவும். RSC Explorer பிழைத்திருத்தி மீண்டும் "இடைநிறுத்துகிறது", நாங்கள் அதைக் கிளிக் செய்ததைக் குறிக்கிறது greet கோரிக்கையின் பேரில் சர்வர் நடவடிக்கை. வாடிக்கையாளருக்கான பதிலைக் காண மஞ்சள் "படி" பொத்தானைக் கிளிக் செய்யவும்.
RSC பெரும்பாலும் ஒரு சட்டத்துடன் கற்பிக்கப்படுகிறது, ஆனால் இது என்ன நடக்கிறது என்பதை மறைக்கிறது. எடுத்துக்காட்டாக, கட்டமைப்பானது சேவையக உள்ளடக்கத்தை எவ்வாறு புதுப்பிக்கிறது? ஒரு திசைவி எப்படி வேலை செய்கிறது?
RSC எக்ஸ்ப்ளோரர் காட்சிகள் பிரேம் இல்லாத ஆர்.எஸ்.சி. இல்லை router.refresh- ஆனால் அதை நீங்களே செய்யலாம் refresh சர்வர் நடவடிக்கை மற்றும் ஏ Router கூறு.
முழு ஆரம்ப இடைமுகத்தையும் திரையில் கண்டுபிடிக்க "படி" பொத்தானை மீண்டும் மீண்டும் கிளிக் செய்யவும்:
டிக்கிங் டைமரைப் பாருங்கள். எப்படி என்பதைக் கவனியுங்கள் ColorTimer சேவையகத்திலிருந்து சீரற்ற நிறத்திற்கு கூறு Timer கிளையண்டில் உள்ள கூறு. மீண்டும், இது ஒரு சேவையகத்தைக் கொண்டுள்ளது திரும்பினார்
இப்போது டைமருக்கு மேலே உள்ள புதுப்பிப்பு பொத்தானை அழுத்தவும்.
குறியீட்டைத் தோண்டி எடுக்காமல், சேவையகத்தின் பதிலை "படி" செய்து என்ன நடக்கிறது என்பதைப் பார்க்கவும். நீங்கள் ஒரு நிலையான துடிப்பைக் காண வேண்டும் Timer சேவையகத்திலிருந்து புதிய சான்றுகளைப் பெறுங்கள். அதன் பின்னணி நிறம் மாறும், ஆனால் அதன் நிலை பாதுகாக்கப்படும்!
ஒரு வகையில், இது ஒரு சாதாரண ரியாக்ட் "மெய்நிகர் DOM" புதுப்பிப்பைத் தவிர, htmx போன்ற ஒன்றைப் பயன்படுத்தி HTML ஐ மறுசீரமைப்பது போன்றது, எனவே இது நிலையை அகற்றாது. இது சேவையகத்திலிருந்து புதிய சான்றுகளை ஏற்றுக்கொள்கிறது. சில முறை "புதுப்பி" என்பதைக் கிளிக் செய்து அதன் வழியாக செல்லவும்.
ஹூட்டின் கீழ் இது எவ்வாறு செயல்படுகிறது என்பதை நீங்கள் பார்க்க விரும்பினால், சர்வர் மற்றும் கிளையன்ட் பாகங்கள் இரண்டிற்கும் கீழே உருட்டவும். சுருக்கமாக, வாடிக்கையாளர் Router JSX சேவையகத்திற்கு உறுதியளிக்கிறது, அது திருப்பியளிக்கப்படும் renderPage(). தொடக்கத்தில், renderPage() சேவையகத்திற்கு அழைக்கப்படுகிறது (காட்சியின் முதல் வெளியீட்டிற்கு) பின்னர், அது கிளையண்டிலிருந்து (மீண்டும் இயக்குவதற்காக) அழைக்கப்படும்.
இந்த நுட்பம், URL பொருத்துதல் மற்றும் கூடு கட்டுதல் ஆகியவற்றுடன், RSC கட்டமைப்புகள் எவ்வாறு ரூட்டிங் கையாள்கிறது. இது ஒரு சிறந்த உதாரணம் என்று நினைக்கிறேன்!
ஆர்வமுள்ளவர்களுக்காக இன்னும் சில உதாரணங்களைச் சேர்த்துள்ளேன்:
மற்றும், நிச்சயமாக, பிரபலமற்ற:
(நீங்கள் எதிர்பார்ப்பது போல், இது பாதிக்கப்படக்கூடிய பதிப்புகளில் மட்டுமே வேலை செய்கிறது, எனவே இது உண்மையில் வேலை செய்ய மேல் வலது மூலையில் உள்ள 19.2.0 ஐத் தேர்ந்தெடுக்க வேண்டும்.)
சமூகத்தால் உருவாக்கப்பட்ட சில சிறந்த RSC எடுத்துக்காட்டுகளைப் பார்க்க விரும்புகிறேன்.
RSC Explorer ஆனது பிற பக்கங்களில் துணுக்குகளை உட்பொதிக்கவும் (இந்தக் கட்டுரையில் நான் செய்ததைப் போல) பகிரப்பட்ட இணைப்புகளை உருவாக்கவும் அனுமதிக்கிறது, குறியீடு URL வரம்பை விட அதிகமாக இல்லாத வரை. கருவி முற்றிலும் கிளையன்ட் பக்கமானது மற்றும் அதை எளிமையாக வைத்திருக்க விரும்புகிறேன்.
Tangled அல்லது GitHub இல் அதன் மூலக் குறியீட்டை உலாவ நீங்கள் வரவேற்கப்படுகிறீர்கள். இது ஒரு பொழுதுபோக்கு திட்டமாகும், எனவே குறிப்பிட்ட எதையும் என்னால் உறுதியளிக்க முடியாது, ஆனால் இது பயனுள்ளதாக இருக்கும் என்று நம்புகிறேன்.
அதைப் பார்த்ததற்கு நன்றி!
Leave a Reply