Next.js: TTFB और CPU लोड को कम करने के लिए स्ट्रीम रेंडरिंग

एक बात का जिक्र करना..

स्ट्रीम रेंडरिंग आमतौर पर ज्यादा CPU सुधार नहीं जोड़ेगा क्योंकि काम की मात्रा समान है। लेकिन यह प्रतिक्रिया समय को कम कर देगा।

SSR रेंडरिंग सिस्टम को अनुकूलित करने का एक तरीका प्रदान करना एक बहुत अच्छा विचार है। लेकिन मुझे लगता है कि अभी के लिए, हम डिफ़ॉल्ट रूप से रिएक्ट के रेंडरटॉस्ट्रिंग () विधियों के साथ रहेंगे।

यह कुछ ऐसा है जो हम 2.0 के बाद कर सकते हैं।

स्ट्रीम रेंडरिंग आमतौर पर ज्यादा CPU सुधार नहीं जोड़ेगा क्योंकि काम की मात्रा समान है।

_आइकिन /रिएक्शन-डोम-स्ट्रीम से _

ReactDOM.renderToString को एक कॉल CPU पर हावी हो सकती है और अन्य अनुरोधों को समाप्त कर सकती है। यह उन सर्वरों पर विशेष रूप से परेशानी भरा है जो छोटे और बड़े पृष्ठों का मिश्रण पेश करते हैं।

स्ट्रीमिंग बड़े पेजों के लिए एसिंक्रोनस और आंशिक दोनों होने के कारण मेमोरी आवंटन और सीपीयू उपयोग को समझदारी से कम नहीं करेगा?

सोचा कि यह उसी तर्ज पर था। क्या किसी ने https://github.com/FormidableLabs/rapscallion की कोशिश की है?

यह एक स्ट्रीमिंग इंटरफ़ेस प्रदान करता है ताकि आप क्लाइंट को तुरंत सामग्री भेजना शुरू कर सकें।

डॉक्स से अन्य विशेषताएं:

• प्रतिपादन अतुल्यकालिक और गैर-अवरुद्ध है।
• रैप्सकैलियन रेंडरटॉस्ट्रिंग की तुलना में लगभग 50% तेज है।
• यह एक स्ट्रीमिंग इंटरफ़ेस प्रदान करता है ताकि आप क्लाइंट को तुरंत सामग्री भेजना शुरू कर सकें।
• यह एक टेम्प्लेटिंग सुविधा प्रदान करता है, जिससे आप स्ट्रीमिंग के लाभों को छोड़े बिना अपने घटक के HTML को बॉयलरप्लेट में लपेट सकते हैं।
• यह आपके प्रतिपादन को और गति देने के लिए एक घटक कैशिंग एपीआई प्रदान करता है।

#2279 में रैप्सकैलियन का एक उदाहरण जोड़ा गया... पुष्टि कर सकता है कि रैप्सकैलियन + नेक्स्ट पागल है। स्ट्रीम/वादा-आधारित रेंडर कमाल का है, लेकिन कंपोनेंट-लेवल कैशिंग हमारे लिए गेम-चेंजर है... :godmode:

अब जबकि रिएक्ट 16 का अपना renderToNodeStream , तो next.js के लिए renderToString बजाय इसका उपयोग करने के लिए एक विकल्प जोड़ना एक बहुत बड़ा लाभ होगा। आपको क्या लगता है, @timneutkens?

यह पहले से जोड़ने के लिए हमारी चीजों की सूची में है

इसके बारे में कोई ख़बर?

https://github.com/zeit/next.js/pull/4074#issuecomment -466996162

कोई खबर?

मुझे लगता है कि उपयोगकर्ता अपने कस्टम एसिंक रेंडरर का उपयोग करने के लिए Next.js को कस्टम render ( renderToString साथ डिफ़ॉल्ट रेंडरर के साथ) को उजागर करने की आवश्यकता है।
इस सुविधा की कमी ने मुझे एसिंक रेंडरर का उपयोग करने के लिए razzle का उपयोग करने के लिए मजबूर किया :( (इसका डीएक्स कहीं भी नेक्स्टजेएस के पास नहीं है, लेकिन मुझे इसे आगे बढ़ने के लिए स्वीकार करना पड़ा)।

मुझे Next.js के बारे में दो चीज़ों को छोड़कर सब कुछ पसंद है:

• कस्टम async रेंडरर।
• सर्वर और क्लाइंट दोनों के लिए कस्टम बेबेल कॉन्फ़िगरेशन।

स्ट्रीमिंग प्रतिपादन समर्थन की कोई रोडमैप/योजना? तो उम्मीद है कि यह next.js में है।

रिएक्ट टीम पर रिएक्ट फ़िज़/इसके लिए उनकी योजना को लागू करने के लिए लंबित है।

@timneutkens क्या समस्या है, पीआर यहाँ ट्रैक करने के लिए?

8 अगस्त 2019 को प्रकाशित फेसबुक के ब्लॉग पोस्ट से
https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

सर्वर रेंडरिंग पर एक अपडेट
हमने नए सस्पेंस-सक्षम सर्वर रेंडरर पर काम शुरू कर दिया है, लेकिन हम इसे समवर्ती मोड के प्रारंभिक रिलीज के लिए तैयार होने की उम्मीद नहीं करते हैं। हालाँकि, यह रिलीज़ एक अस्थायी समाधान प्रदान करेगा जो मौजूदा सर्वर रेंडरर को तुरंत सस्पेंस फ़ॉलबैक के लिए HTML को उत्सर्जित करने देता है, और फिर क्लाइंट पर उनकी वास्तविक सामग्री प्रस्तुत करता है। स्ट्रीमिंग रेंडरर तैयार होने तक यह वह समाधान है जिसे हम वर्तमान में फेसबुक पर उपयोग कर रहे हैं।

सर्वर स्ट्रीमिंग समर्थन पर अभी भी प्रतीक्षा कर रहे किसी के लिए :)

क्या next.js में renderToNodeStream को लागू करने के लिए कोई अपडेट या कोई अन्य तरीका है?

क्या कोई अपडेट है?

<3

किसी भी अद्यतन?

@StarpTech मैंने इसमें थोड़ा सा देखा था (इस सुविधा के लिए भी उत्सुक!) और ऐसा लगता है कि प्रतिक्रिया टीम प्रतिक्रिया-उड़ान नामक किसी चीज़ पर काम कर रही है, जो शायद स्ट्रीमिंग समाधान का आधार होगा जिसका हम यहां इंतजार कर रहे हैं :)

प्रतिक्रिया उड़ान:

यह कस्टम रिएक्ट स्ट्रीमिंग मॉडल का उपभोग करने के लिए एक प्रयोगात्मक पैकेज है।

प्रासंगिक पीआर जो मेरे द्वारा व्याख्या किए गए आंतरिक कामकाज पर कुछ प्रकाश डालते हैं (इसमें से किसी में विशेषज्ञ नहीं)
#17285 : उड़ान के लिए मूल एपीआई, सर्वर को एक स्ट्रिंग के रूप में सब कुछ स्ट्रीम करने में सक्षम होना चाहिए, लेकिन प्लेसहोल्डर को सर्वर पर एसिंक्रोनस रूप से हल किए गए हिस्सों के लिए छोड़ दें। एक अधूरा, फिर भी दिलचस्प, एक धारा से प्रतिक्रिया कैसे पता चलेगा कि यह वास्तव में किस डेटा प्रकार का प्रतिनिधित्व करता है, इसके लिए वाक्यविन्यास यहां खत्म हो गया

#17398 हाल ही में पीआर, चंक्स के लिए एक एपीआई जोड़ता है (यदि आप भाग्यशाली महसूस कर रहे हैं) तो आप उस हिस्से को स्वयं आज़मा सकते हैं। सुनिश्चित नहीं है कि सब कुछ एक साथ कैसे आएगा, लेकिन फिर भी मैं यह सब काम देखकर बहुत खुश हूं :)

_यह विषय से थोड़ा हटकर हो सकता है, लेकिन उम्मीद है कि इस मुद्दे की सदस्यता लेने वाले लोगों के लिए दिलचस्प होगा :)_

@pepf जानकारी के लिए धन्यवाद!

हम्म। आप सभी लोगों का धन्यवाद, रोचक जानकारी। मैं सिर्फ यह सोच रहा हूं कि नेक्स्टजेएस को सस्पेंस और सामान के लिए रिएक्ट सपोर्ट एसएसआर का इंतजार क्यों करना चाहिए, और अभी स्ट्रीमएस्ट्रिंग का उपयोग नहीं करना चाहिए?

@arunoda मुझे लगता है कि यह मेमोरी खपत को कम करेगा, कम मेमोरी लैम्ब्डा फ़ंक्शंस या क्लाउडफ्लेयर वर्कर्स के लिए बहुत महत्वपूर्ण है।

इसके बारे में कोई ख़बर?

कोई खबर?

कोई खबर है दोस्तों? :पी

यह देखते हुए कि प्रतिक्रिया रहस्य ऐसा लगता है कि यह कभी बाहर नहीं आ सकता है, क्या कोई तरीका है जिससे हम इसे फिर से देख सकते हैं? मैं काफी सामान्य, कम-सामग्री वाले पृष्ठों पर 800-1000ms का प्रारंभिक रेंडर समय देख रहा हूं (जो वर्सेल पर सर्वर रहित फ़ंक्शन से प्रस्तुत किए जाते हैं)। सिद्धांत रूप में HTML को स्ट्रीम करना संपर्क के उस प्रारंभिक बिंदु को टक्कर दे सकता है और बहुत तेजी से पहले-लोड ux को माना जा सकता है।

क्या यह नेक्स्टजेएस के बजाय वर्सेल की सीमा है? क्या वर्सेल उसी तरह के कोल्ड-स्टार्टअप का शिकार होता है जो लैम्ब्डा करता है? मेरी टीम सामग्री भारी साइटों का एक समूह चलाती है और पूरे अनुरोध के लिए हमारा समय 50ms से कम है। मुझे नहीं लगता कि स्ट्रीमिंग यहां चांदी की गोली होगी।

मुझे उम्मीद नहीं है कि यह एक चांदी की गोली होगी, लेकिन यह निश्चित रूप से एक स्वागत योग्य सुधार होगा।

उल्लेखित कोल्ड-स्टार्ट समय की तुलना में अनुकूलन करने के लिए 50ms मामूली और अपेक्षाकृत बहुत महत्वहीन लगता है, लेकिन यह क्लाउडफ्लेयर वर्कर्स जैसी किसी चीज़ के साथ किनारे पर प्रतिपादन करते समय नहीं है (यह निकटतम क्लाउडफ्लेयर एज स्थान पर पिंग जितना है, या कम से कम आधा है ), क्लाउडफ्लेयर वर्कर्स बहुत जल्दी प्रतिक्रिया देते हैं, आमतौर पर 5 मिलीसेकंड से कम में, जब ठंड शुरू होती है। इसके विपरीत, लैम्ब्डा और लैम्ब्डा@एज दोनों प्रकार्यों को ठंडी शुरुआत से प्रतिक्रिया करने में एक सेकंड से अधिक समय लग सकता है।
मुझे पता है कि यह वरसेल (जो अपनी सीडीएन बनाता है) के लिए अगला.जेएस के नियोजित डेवलपर्स को प्राथमिकता देने के लिए बेहतर मामला नहीं बनाता है।

क्या कोई दस्तावेज या भंडार है जहां लोगों ने नेक्स्ट.जेएस को सफलतापूर्वक क्लाउडफ्लेयर कर्मचारियों के लिए तैनात किया है? मैंने कुछ गुगल किया और उस पर बहुत कुछ नहीं मिला। वह अद्भुत होगा।

मेरे फोन से भेजा गया

जुला 5, 2020, पर 5:47 pm पर, विस [email protected] लिखा है:

उल्लिखित कोल्ड-स्टार्ट समय की तुलना में अनुकूलित करने के लिए 50ms वास्तव में कम और अपेक्षाकृत महत्वहीन लगता है, लेकिन क्लाउडफ्लेयर वर्कर्स जैसी किसी चीज़ के साथ किनारे पर प्रतिपादन करते समय 50ms बहुत अधिक है (यह निकटतम क्लाउडफ्लेयर एज स्थान पर पिंग जितना है, या कम से कम हाफ), क्लाउडफ्लेयर वर्कर्स बहुत जल्दी प्रतिक्रिया देते हैं, आमतौर पर 5 मिलीसेकंड से कम समय में, जब ठंड शुरू होती है। इसके विपरीत, लैम्ब्डा और लैम्ब्डा@एज दोनों प्रकार्यों को ठंडी शुरुआत से प्रतिक्रिया करने में एक सेकंड से अधिक समय लग सकता है।
मुझे पता है कि यह वरसेल (जो अपनी सीडीएन बनाता है) के लिए अगला.जेएस के नियोजित डेवलपर्स को प्राथमिकता देने के लिए बेहतर मामला नहीं बनाता है।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या सदस्यता समाप्त करें।

उल्लिखित कोल्ड-स्टार्ट समय की तुलना में अनुकूलित करने के लिए 50ms मामूली और अपेक्षाकृत बहुत महत्वहीन लगता है

स्पष्ट करने के लिए, मैं अपने 50ms प्रतिक्रिया समय के बारे में शिकायत नहीं कर रहा था - मैं सिर्फ यह इंगित कर रहा था कि नेक्स्टजेएस 'एसआरआर सामग्री-भारी पृष्ठों के लिए 3k अनुरोधों/मिनट के उत्तर में भी अपेक्षाकृत प्रदर्शनकारी है, इसलिए स्विट्ज की समस्या कहीं और हो सकती है।

क्या कोई दस्तावेज या भंडार है जहां लोगों ने सफलतापूर्वक अगला.js को क्लाउडफ्लेयर कर्मचारियों के लिए तैनात किया है

मुझे इसमें भी दिलचस्पी होगी। हम वर्तमान में फ़ार्गेट में चल रहे हैं लेकिन हमारे ऐप को किनारे पर धकेलना अगला तार्किक कदम होगा।

मैंने अपने एचटीएमएल में हर संभव सुधार किया है और सर्वर प्रतिक्रिया समय चमक रहा है! :(

@huggler आप इस उदाहरण को cacheable-response के साथ जोड़ सकते हैं। एचटीएमएल को कैश में स्टोर करने के लिए आप रेडिस (या उदाहरण के लिए इन-मेमोरी कैश) का उपयोग कर सकते हैं। यह सर्वर प्रतिक्रिया समय में सुधार करता है।

क्या कोई दस्तावेज या भंडार है जहां लोगों ने नेक्स्ट.जेएस को सफलतापूर्वक क्लाउडफ्लेयर कर्मचारियों के लिए तैनात किया है? मैंने कुछ गुगल किया और उस पर बहुत कुछ नहीं मिला। वह अद्भुत होगा।

@switz @tills13 क्या आपने https://fab.dev/ चेक किया? हमने 2020 की शुरुआत में इसके साथ खेला और यह रिलीज़ से पहले की स्थिति में था, लेकिन ऐसा लगता है कि वे बहुत दूर आ गए हैं। उनकी सीमाओं में से एक क्लाउडफ्लेयर ही था, लेकिन अब तक चीजें बदल सकती हैं।

थोड़ी देर में नहीं देखा। पुनर्मूल्यांकन करना होगा। पिछली बार जब मैंने देखा, तो कुछ बहुत ही गंभीर ट्रेडऑफ़ थे।

मैं https://github.com/flareact/flareact पर भी नजर रख रहा हूं

इस पर किसी भी अद्यतन?