React.js के सबसे बड़े लाभों में से एक सर्वर-साइड रेंडरिंग माना जाता है । समस्या यह है कि कुंजी फ़ंक्शन React.renderComponentToString()सिंक्रोनस है जो किसी भी अतुल्यकालिक डेटा को लोड करना असंभव बनाता है क्योंकि घटक पदानुक्रम सर्वर पर प्रदान किया जाता है।
मान लें कि मेरे पास टिप्पणी करने के लिए एक सार्वभौमिक घटक है जिसे मैं पृष्ठ पर कहीं भी बहुत कम कर सकता हूं। इसके पास केवल एक संपत्ति है, कुछ प्रकार के पहचानकर्ता (उदाहरण के लिए एक लेख के नीचे आईडी जिसमें टिप्पणियाँ रखी गई हैं), और बाकी सब कुछ घटक द्वारा ही नियंत्रित किया जाता है (लोड करना, जोड़ना, प्रबंधित करना)।
मैं वास्तव में फ्लक्स आर्किटेक्चर को पसंद करता हूं क्योंकि यह बहुत सारी चीजों को आसान बनाता है, और इसके स्टोर सर्वर और क्लाइंट के बीच साझा करने के लिए एकदम सही हैं। एक बार जब मेरी स्टोर युक्त टिप्पणियों को इनिशियलाइज़ कर लिया जाता है, तो मैं इसे क्रमबद्ध कर सकता हूँ और इसे सर्वर से क्लाइंट पर भेज सकता हूँ जहाँ यह आसानी से बहाल हो जाता है।
सवाल यह है कि मेरे स्टोर को आबाद करने का सबसे अच्छा तरीका क्या है। पिछले दिनों के दौरान मैं बहुत कुछ कर रहा हूं और मैं कुछ रणनीतियों के साथ आया हूं, जिनमें से कोई भी वास्तव में अच्छा नहीं लग रहा था, यह देखते हुए कि रिएक्ट के इस फीचर को "बढ़ावा" दिया जा रहा है।
मेरी राय में, सबसे आसान तरीका यह है कि वास्तविक रेंडरिंग शुरू होने से पहले मेरे सभी स्टोरों को आबाद कर दिया जाए। इसका मतलब है कि घटक पदानुक्रम के बाहर कहीं (उदाहरण के लिए मेरे राउटर को झुका हुआ)। इस दृष्टिकोण के साथ समस्या यह है कि मुझे पेज संरचना को दो बार बहुत अधिक परिभाषित करना होगा। अधिक जटिल पृष्ठ पर विचार करें, उदाहरण के लिए कई अलग-अलग घटकों (वास्तविक ब्लॉग पोस्ट, टिप्पणियां, संबंधित पोस्ट, नवीनतम पोस्ट, ट्विटर स्ट्रीम ...) के साथ एक ब्लॉग पेज। मुझे रिएक्ट घटकों का उपयोग करके पृष्ठ संरचना को डिज़ाइन करना होगा और फिर कहीं और मुझे इस वर्तमान पृष्ठ के लिए प्रत्येक आवश्यक स्टोर को आबाद करने की प्रक्रिया को परिभाषित करना होगा। यह मेरे लिए एक अच्छा समाधान की तरह प्रतीत नहीं होता है। दुर्भाग्य से अधिकांश आइसोमॉर्फिक ट्यूटोरियल इस तरह से डिज़ाइन किए गए हैं (उदाहरण के लिए यह महान फ्लक्स-ट्यूटोरियल )।
प्रतिक्रिया-async । यह दृष्टिकोण एकदम सही है। यह मुझे प्रत्येक घटक में एक विशेष फ़ंक्शन में परिभाषित करता है कि कैसे राज्य को आरंभीकृत किया जाए (इससे कोई फर्क नहीं पड़ता कि क्या सिंक्रोनस या एसिंक्रोनस रूप से) और इन फ़ंक्शनों को HTML के लिए पदानुक्रम कहा जा रहा है। यह इस तरह से काम करता है कि एक घटक का प्रतिपादन तब तक नहीं किया जाता है जब तक कि राज्य पूरी तरह से प्रारंभिक नहीं हो जाता है। समस्या यह है कि इसके लिए फाइबर्स की आवश्यकता होती हैजो है, जहाँ तक मैं समझता हूँ, एक मानक मानक व्यवहार को बदलने वाला Node.js एक्सटेंशन। हालांकि मुझे वास्तव में परिणाम पसंद है, फिर भी यह मुझे लगता है कि समाधान खोजने के बजाय हमने खेल के नियमों को बदल दिया। और मुझे लगता है कि हमें React.js की इस मुख्य विशेषता का उपयोग करने के लिए मजबूर नहीं होना चाहिए। मैं इस समाधान के सामान्य समर्थन के बारे में भी निश्चित नहीं हूं। क्या मानक Node.js वेब होस्टिंग पर फाइबर का उपयोग करना संभव है?
मैं अपने आप पर थोड़ा सोच रहा था। मैंने वास्तव में कार्यान्वयन विवरणों को गर्त में डालने के बारे में नहीं सोचा है, लेकिन सामान्य विचार यह है कि मैं घटकों को रिएक्ट-एसिंक्स के समान तरीके से विस्तारित करूंगा और फिर मैं रूट घटक पर बार-बार React.renderComponentToString () कॉल करूंगा। प्रत्येक पास के दौरान मैं फैली हुई कॉलबैक को इकट्ठा करूंगा और फिर दुकानों को आबाद करने के लिए और पास के कॉल पर उन्हें कॉल करूंगा। मैं इस चरण को तब तक दोहराता रहूंगा जब तक कि वर्तमान घटक पदानुक्रम द्वारा आवश्यक सभी स्टोर आबाद नहीं हो जाते। कई चीजों को हल किया जाना है और मैं प्रदर्शन के बारे में विशेष रूप से अनिश्चित हूं।
क्या मैं कुछ भुल गया? क्या एक और दृष्टिकोण / समाधान है? अभी मैं रिएक्ट-एसिंक्स / फाइबर्स तरीके से जाने के बारे में सोच रहा हूं, लेकिन मैं इसके बारे में पूरी तरह सुनिश्चित नहीं हूं, जैसा कि दूसरे बिंदु में बताया गया है।
GitHub पर संबंधित चर्चा । जाहिर है, कोई आधिकारिक दृष्टिकोण या समाधान भी नहीं है। शायद असली सवाल यह है कि रिएक्ट घटकों का उपयोग कैसे किया जाए। सरल दृश्य परत की तरह (बहुत अधिक मेरा सुझाव नंबर एक) या वास्तविक स्वतंत्र और स्टैंडअलोन घटकों की तरह?