- NYT इंजीनियर पेज प्रदर्शन, SEO और नवीनतम तकनीकों के साथ अपडेट रहने को बहुत महत्व देते हैं
- React 18 अपग्रेड के दौरान आई कुछ समस्याओं को हल करते हुए उन्होंने बड़ा प्रदर्शन सुधार हासिल किया
- React 18 के मुख्य फायदे: Concurrent Mode की वजह से अधिक स्मूद rendering, automatic batching और transitions, server-side rendering और streaming updates आदि
- अपग्रेड के जरिए पेज responsiveness के मेट्रिक INP (Interaction to Next Paint) स्कोर में सुधार की उम्मीद थी
माइग्रेशन प्रक्रिया
- अब उपयोग में न रहने वाली Enzyme testing library को @testing-library/react से बदला गया
- React 18 की नई सुविधाओं को सुरक्षित रूप से एकीकृत करने के लिए मुख्य dependencies, types और tests को React 18 के अनुसार अपग्रेड किया गया
- नए API
createRoot और hydrateRoot का उपयोग करके React 18 की सुविधाएँ लागू की गईं
- शुरुआती deployment के बाद कस्टम "embedded interactive" में अप्रत्याशित समस्याएँ सामने आईं
- React 18, पिछले versions की तुलना में hydration mismatch के प्रति अधिक संवेदनशील है, इसलिए या तो hydration mismatch को ठीक करना था या mismatch होने पर client side पर embedded interactive को remount करना था
- सभी hydration mismatch को सुरक्षित रूप से ठीक करना एक कठिन काम था
embedded interactive script का मैन्युअल extraction और execution
- ब्राउज़र सुरक्षा कारणों से
innerHTML prop के जरिए जोड़े गए script tags अपने-आप execute नहीं होते
- script tags को सही तरह से चलाने के लिए उन्हें interactive HTML से extract और remove करना पड़ता है, फिर component rerender होने पर सही जगह दोबारा जोड़ना पड़ता है
- कुछ interactive scripts को दोबारा जोड़ते समय सही क्रम में load करना आवश्यक था
- पहले static data वाले manifest script को जोड़ा गया
src attribute वाले scripts को asynchronous तरीके से execute किया गया- अंत में
innerHTML में vanilla JavaScript वाले scripts को जोड़ा और execute किया गया
तत्काल प्रदर्शन सुधार
- embedded interactive code पर सूक्ष्म नियंत्रण को एकीकृत करने के बाद React 18 को सुरक्षित रूप से deploy किया जा सका
- deployment के बाद INP स्कोर में लगभग 30% की कमी सहित लगभग तुरंत प्रदर्शन सुधार देखा गया
- React 18 की automatic batching और concurrency सुविधाओं के कारण page load के दौरान होने वाले rerender लगभग आधे रह गए
आगे की दिशा
startTransition और React Server Components जैसी नई सुविधाओं के संभावित फायदों की खोज पर ध्यान दिया जाएगा- INP स्कोर को लगातार कम करना और समग्र कार्यक्षमता में सुधार करना मुख्य लक्ष्य है
- वर्तमान में उपयोग हो रहे React version के स्थिर और भरोसेमंद प्रदर्शन की गारंटी सर्वोच्च प्राथमिकता है
- समाचार साइट पर मिले परिणामों के आधार पर अन्य साइटों पर भी इसी तरह के प्रदर्शन सुधार का प्रयास किया जाएगा
- Google के SEO algorithm बदलाव से पहले INP स्कोर को 'खराब' श्रेणी से बाहर लाने में सफलता मिली, और कोई नकारात्मक SEO परिणाम नहीं हुआ
अभी कोई टिप्पणी नहीं है.