Vue.js SSR और मोबाइल सफ़ारी: बहुत स्मार्ट सॉफ्टवेयर के साथ एक अनहोनी समस्या

दूसरे दिन, मुझे ऐसी समस्या का सामना करना पड़ा। सर्वर-साइड जनरेट किए गए कोड ने सफारी में हाइड्रेट करने से इनकार कर दिया।

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

"प्रोडक्शन" बस गिर गया, और देव संस्करण ने बताया कि डोम में विसंगतियां थीं। और चूंकि हाइड करने की कोशिश करते समय देव संस्करण दुर्घटनाग्रस्त नहीं होता है, लेकिन केवल इसे कंसोल में रिपोर्ट करता है, त्रुटि स्पष्ट नहीं थी और जब हमने इसे पाया, तो काफी समय बीत गया।

Vue से एक बहुत ही दिलचस्प रणनीति उत्पादन के लिए प्रतीक्षा करने और वहां गिरने की है!

अलग-अलग जटिलता के पंद्रह सौ घटकों ने कार्य को सरल नहीं किया। नतीजतन, मैं समस्या को देखने, एक उपयुक्त डिवाइस खोजने और डेवलपर कंसोल के साथ दोस्त बनाने में कामयाब रहा।

परिणामस्वरूप, यह पता चला कि हमारा एप्लिकेशन क्रैश हो जाता है जब पाद घटक जुड़ा होता है। और जब उन्हें सही लाइन मिली, तो उन्हें बस अपनी आँखों पर विश्वास नहीं हुआ। कुछ भी लेकिन यह उम्मीद है।

यह पता चला कि जब आप फोन नंबर हटाते हैं, तो हाइड्रेशन बिना किसी समस्या के होता है। जब उन्होंने खुदाई शुरू की, तो यह पता चला कि एचटीएमएल-लेआउट प्राप्त करने के बाद, फोन के बगल में एक टैग लगाया गया, जो वास्तव में डायलर का कारण बना।

स्वाभाविक रूप से, जब जलयोजन शुरू हुआ, तो सर्वर से आए पृष्ठ का डोम और नए बने आभासी एक का मिलान नहीं हुआ। युद्ध घोषित किए बिना एप्लिकेशन क्रैश हो गया।

इस समस्या को भी काफी अप्रत्याशित रूप से हल किया गया था। अब तक, हमने फोन को सामान्य तरीके से डाला:

<div>8 (800) 111 2 333</div> 

समाधान वी-पाठ बाध्यकारी था:

 <div v-text=”8 (800) 111 2 333”></div> 

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