एक बेहतरीन वेबसाइट उपयोगकर्ता अनुभव प्रदान करने के लिए, हमें पहले प्रारंभिक पृष्ठ लोड समय और पृष्ठ की सहभागिता के प्रति प्रतिक्रिया को अनुकूलित करने की आवश्यकता है। आपका पृष्ठ जितनी तेज़ी से उपयोगकर्ता इनपुट का जवाब देता है - उतना ही बेहतर।
प्रतिक्रिया 18 जैसी सुविधाओं के साथ अंतःक्रियाशीलता को बेहतर बनाने में मदद करने के लिए डिज़ाइन किया गया था चयनात्मक जलयोजन साथ में Suspense
हाइड्रेशन को गैर-अवरुद्ध करने के लिए और हमें इस बारे में अधिक पारदर्शिता प्रदान करने के लिए कि कैसे हमारा वास्तु विकल्प हमारे ऐप के UX और प्रदर्शन को प्रभावित करेंगे। रिएक्ट 18 प्रमुख प्रदर्शन सुधार करता है और इसके लिए समर्थन जोड़ता है Suspense
सर्वर-साइड रेंडरिंग (SSR) पर ऐप के कुछ हिस्सों को एसिंक्रोनस रूप से परोसने की अनुमति देते हुए, आप अपने ऐप के धीमे हिस्से को सस्पेंस कंपोनेंट के भीतर लपेट सकते हैं, रिएक्ट को स्लो कंपोनेंट के लोड होने में देरी करने के लिए कह सकते हैं।
सर्वर-साइड रेंडरिंग आपको सर्वर पर रिएक्ट घटकों से HTML उत्पन्न करने और उस HTML को अपने उपयोगकर्ताओं को भेजने की सुविधा देता है। एसएसआर आपके उपयोगकर्ताओं को आपके जावास्क्रिप्ट बंडल के लोड होने और चलने से पहले पृष्ठ की सामग्री को देखने देता है, जिसके बाद जावास्क्रिप्ट कोड लोड होता है और HTML के साथ विलय हो जाता है, ईवेंट हैंडलर संलग्न करता है - जो है जलयोजन. पारंपरिक HTML स्ट्रीमिंग के विपरीत, यह टॉप-डाउन क्रम में होने की आवश्यकता नहीं है।
- Suspense
, आप रिएक्ट को लोडिंग स्पिनर की तरह प्लेसहोल्डर के लिए HTML के साथ अन्य घटकों के लिए HTML भेजने के लिए कह सकते हैं। यह उपयोगकर्ता अनुभव और उपयोगकर्ता-कथित विलंबता में उल्लेखनीय रूप से सुधार करता है।
दो प्रमुख SSR विशेषताएं हैं रिएक्ट 18 सस्पेंस से खुला:
- सर्वर पर HTML स्ट्रीमिंग।
- ग्राहक पर चयनात्मक जलयोजन।
आइए ढूंढते हैं रिएक्ट डेटा लाने का तरीका साथ में useEffect
और Suspense
व्यावहारिक समाधान प्राप्त करने वाले बैकएंड डेटा की तुलना करने का प्रयास करें, हमारे मामले में हम एक तेज़ और सहज ज्ञान युक्त हेडलेस सीएमएस चुनते हैं लौकिक. हमारे कोड उदाहरण आप एक लिंक द्वारा देख सकते हैं स्टैकब्लिट्ज.
इंटीग्रेशन कॉस्मिक हेडलेस सीएमएस
डेटा लाने के लिए हम उपयोग करते हैं कॉस्मिक हेडलेस सीएमएस एक बैक-एंड ओनली कंटेंट मैनेजमेंट सिस्टम (CMS) एक बैक-एंड-ओनली कंटेंट मैनेजमेंट सिस्टम (CMS) है, जो एक कंटेंट रिपॉजिटरी के रूप में ग्राउंड-अप से बनाया गया है जो कंटेंट को एक्सेसिबल बनाता है। कॉस्मिक से मूल्यों को एकीकृत करने और प्राप्त करने के लिए, हमें आपके प्रोजेक्ट में कॉस्मिक मॉड्यूल स्थापित करने की आवश्यकता है।
npm i cosmicjs yarn add cosmicjs
फिर बनाएं a create मुक्त ब्रह्मांडीय खाता और जाएं कॉस्मिक डैशबोर्ड Your Bucket > Settings > API Access
और अपने बकेट स्लग और एपीआई रीड की को ढूंढें और उन्हें कॉस्मिक फ़ेच फंक्शन बनाने में जोड़ें fetchDataByType
अपने कॉस्मिक बकेट से अनुरोध करें और द्वारा निर्मित श्रेणियाँ सामग्री प्राप्त करें ब्रह्मांडीय क्वेरी टाइप categories
.
import Cosmic from 'cosmicjs'; const bucket = Cosmic().bucket({ slug: 'your_cosmic_slug', read_key: 'your_cosmic_read_key',
}); export async function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; try { const data = await bucket.getObjects(params); return data.objects; } catch (error) { return { error }; }
}
कॉस्मिक शक्तिशाली सामग्री मॉडलिंग सुविधाएँ भी प्रदान करता है जो आपको एक बार बनाने और हर जगह प्रकाशित करने के लिए किसी भी प्रकार की सामग्री को सुपर-फास्ट और मल्टी-चैनल प्रकाशन बनाने देती है।
फ़ेच-ऑन-रेंडर
फ़ेच-ऑन-रेंडर दृष्टिकोण नेटवर्क अनुरोध को माउंट करने के बाद घटक में ही ट्रिगर किया जाता है, अनुरोध तब तक ट्रिगर नहीं होता जब तक कि घटक प्रस्तुत नहीं हो जाता। यदि आप एक क्लीनअप फ़ंक्शन नहीं लिखते हैं जो पुरानी प्रतिक्रियाओं को अनदेखा करता है, तो आप देखेंगे कि a दौड़ की स्थिति (रिएक्ट में) बग जब डेटा के लिए दो अलग-अलग अनुरोध किए गए हैं, और एप्लिकेशन एक अलग परिणाम प्रदर्शित करता है जिसके आधार पर अनुरोध पहले पूरा होता है। वास्तव में रिएक्ट 18 पर, यदि आप अपने एप्लिकेशन में स्ट्रिक्टमोड को सक्षम करते हैं, तो विकास मोड में आप पाएंगे कि useEffect का उपयोग दो बार किया जाएगा, क्योंकि अब रिएक्ट आपके घटक को माउंट करेगा, डिसमाउंट करेगा, और फिर इसे फिर से माउंट करेगा, यह जांचने के लिए कि आपका कोड है या नहीं ठीक से काम कर रहा है।
आइए इसका लाभ उठाकर डेटा लाने वाली दौड़ की स्थिति को ठीक करें useEffect
सफाई समारोह। यदि हम कई अनुरोध करने के साथ ठीक हैं, लेकिन केवल अंतिम परिणाम प्रदान करते हैं, तो हम एक बूलियन ध्वज का उपयोग कर सकते हैं isMount
:
import React, { useEffect, useState } from 'react';
import Category from './components/Category';
import { fetchDataByType } from './cosmic.js'; const App = () => { const [categories, setCategories] = useState([]); const getCategories = async () => { const result = await fetchDataByType('categories'); if (result.length) { setCategories(result); } }; useEffect(() => { let isMount = true; if (isMount) { getCategories(); } return () => { isMount = false; }; }, []); return ( <div className={cn('container', styles.container)}> <div className={styles.sidebar}> <div className={styles.collections}> {categories?.map((category) => ( <Category key={category.id} info={category} /> ))} </div> </div> </div> );
}; export default App;
इसके अतिरिक्त, यदि कोई घटक कई बार प्रस्तुत करता है (जैसा कि वे आम तौर पर करते हैं), तो अगले प्रभाव को निष्पादित करने से पहले पिछले प्रभाव को साफ किया जाता है।
इस मामले में, हमारे पास अभी भी इस अर्थ में एक दौड़ की स्थिति है कि कॉस्मिक के लिए कई अनुरोध इन-फ्लाइट होंगे, लेकिन केवल पिछले वाले के परिणामों का उपयोग किया जाएगा।
के रूप में भी डैन अब्रामोव बताते हैं, फ़ेच-ऑन-रेंडर स्क्रीन के बीच धीमा नेविगेशन प्रदान करता है। यदि आपके पास है माता-पिता और बच्चे के घटक दोनों ला रहे हैं useEffects
, तो चाइल्ड कंपोनेंट तब तक लाना शुरू नहीं कर सकता जब तक कि पैरेंट कंपोनेंट फ़ेचिंग पूरा नहीं कर लेता। सिंगल-पेज ऐप्स में इस प्रकार की प्रदर्शन समस्याएं बहुत आम हैं और "अत्यधिक री-रेंडरिंग" की तुलना में बहुत अधिक धीमी गति का कारण बनती हैं और यदि हमारे पास कई समानांतर अनुरोधों के साथ एक जटिल एप्लिकेशन है, तो हम एप्लिकेशन लोड के विभिन्न हिस्सों को यादृच्छिक क्रम में देखेंगे। . किसी एप्लिकेशन के लिए अधिक प्राकृतिक व्यवहार चीजों को ऊपर से नीचे तक प्रस्तुत करना है।
रेंडर-एज़-यू-फ़ेच
रेंडर-एज़-यू-फ़ेच दृष्टिकोण आइए नेटवर्क अनुरोध को ट्रिगर करने के तुरंत बाद हमारे घटक को प्रस्तुत करना शुरू करें और हम नेटवर्क अनुरोध को शुरू करने के तुरंत बाद बहुत अधिक प्रस्तुत करना शुरू कर दें।
डेटा फ़ेचिंग के लिए सस्पेंस
सस्पेंस के साथ, हम प्रतिपादन शुरू करने से पहले प्रतिक्रिया के वापस आने की प्रतीक्षा नहीं करते हैं और हमारे उदाहरण के कुल अवरोधन समय (टीबीटी) को 106ms से घटाकर 56ms कर देते हैं।
रिएक्ट में डेटा लाने को आसान बनाने के लिए रिएक्ट कोर टीम समवर्ती सुविधाओं का सेट है। दुविधा इनमें से एक है, और इसका उद्देश्य रिएक्ट घटकों में लोडिंग स्थिति के प्रबंधन को सरल बनाना है। यह रिएक्ट ऐप में एसिंक्रोनस ऑपरेशंस को प्रबंधित करने की एक सुविधा है और आपको इसका उपयोग करने की सुविधा भी देती है <Suspense>
डेटा सहित किसी अन्य चीज़ के लिए घोषणात्मक रूप से "प्रतीक्षा" करने के लिए, और अब पृष्ठ के हाइड्रेटिंग भागों को शुरू करने के लिए सभी जावास्क्रिप्ट के लोड होने की प्रतीक्षा नहीं करनी होगी।
सबसे पहले, हम किसी भी घटक को लाइन एक पर प्रस्तुत करने से पहले नेटवर्क अनुरोध को ट्रिगर करते हैं। मुख्य में App
घटक, हम दोनों को लपेटते हैं Category
और Cards
, Main
अलग-अलग घटकों Suspense
उनके कमबैक के साथ घटक।
. App
पहली बार माउंट करता है, यह प्रस्तुत करने का प्रयास करता है Category
और यह ट्रिगर करता है resourseCategories.read()
रेखा। यदि डेटा अभी तक तैयार नहीं है (यानी, अनुरोध का समाधान नहीं किया गया है), तो इसे वापस सस्पेंस में भेज दिया जाता है, जो तब प्रस्तुत करता है <p>Loading…</p>
. ऐसा ही होता है Cards
और Main
import React, { Suspense } from 'react'; const App = () => { return ( <main> <Suspense fallback={<p>Loading.....</p>}> <Cards /> </Suspense> <div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </main> );
}; export default App;
Suspense
यह डेटा लाने के लिए एक नया इंटरफ़ेस नहीं है, क्योंकि वह कार्य अभी भी फ़ेच या एक्सियोस जैसे पुस्तकालयों को सौंपा गया है, और Suspense
असली काम सिर्फ यह कहना है कि "लोड होने के दौरान यह कोड दिखाएं, और दिखाएं कि यह कब हो गया", इससे ज्यादा कुछ नहीं।
अपने फ़ेचिंग लॉजिक को लपेटें wrapPromise.js
जब हमारे घटक डेटा लोड कर रहे हों या यह विफल हो गया हो, तो हमें अपवाद फेंकने के लिए रैप फ़ेचिंग लॉजिक की भी आवश्यकता होती है, लेकिन फिर एक बार प्रतिक्रिया वापस कर दें Promise
सफलतापूर्वक हल हो गया है और यदि यह अभी भी लंबित है, तो यह वादा वापस फेंक देता है।
function wrapPromise(promise) { let status = 'pending'; let response; const suspender = promise.then( res => { status = 'success'; response = res.objects; }, err => { status = 'error'; response = err; }, ); const handler = { pending: () => { throw suspender; }, error: () => { throw response; }, default: () => response, }; const read = () => { const result = handler[status] ? handler[status]() : handler.default(); return result; }; return { read };
} export default wrapPromise;
के अंत में wrapPromise
फ़ंक्शन हमारे वादे की स्थिति की जाँच करेगा, फिर एक वस्तु लौटाएगा read
एक विधि के रूप में कार्य करता है, और यही हमारे रिएक्ट घटक वादे के मूल्य को पुनः प्राप्त करने के लिए बातचीत करेंगे।
अब हमें कॉस्मिक कॉल फंक्शन्स को इसमें लपेटना होगा wrapPromise
:
export function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; const data = bucket.getObjects(params); return wrapPromise(data);
}
उपरोक्त कॉस्मिक लाने के कार्यों के लिए सिर्फ एक अमूर्त है Suspense
और एक बार लाओ।
घटक में डेटा पढ़ें
एक बार जब सब कुछ चीजों के लाने के पक्ष में लपेटा जाता है, तो हम इसे अपने घटक में उपयोग करना चाहते हैं। तो क्या हो रहा है जब हम घटक कहते हैं, read()
फ़ंक्शन पूरी तरह से हल होने तक अपवादों को फेंकना शुरू कर देगा, और जब ऐसा होता है तो यह बाकी कोड के साथ जारी रहेगा, हमारे मामले में इसे प्रस्तुत करने के लिए।
import React from 'react';
import { fetchDataByType } from '../../cosmic.js';
import styles from '../../styles/Collection.module.scss'; const resourseCategories = fetchDataByType(); const Category = () => { const categories = resourseCategories.read(); const renderCategories = categories?.map((info) => ( <div key={info?.id} className={styles.user}> <div className={styles.avatar}> <img className={styles.image} src={info?.metadata?.image?.imgix_url} alt="Avatar" /> </div> <div className={styles.description}> <div className={styles.name}>{info?.metadata?.title}</div> <div className={styles.money} dangerouslySetInnerHTML={{ __html: info?.content }} /> </div> </div> )); return <div className={styles.collections}>{renderCategories}</div>;
}; export default Category;
मूल घटक
Suspense
हमारे अनुप्रयोगों में लंबित राज्यों के लिए रिएक्ट एक्सेस देता है और यही कारण है कि रिएक्ट को पता है कि एक नेटवर्क कॉल हो रहा है, यह हमें प्रतीक्षा करते समय फॉलबैक घटक को घोषणात्मक रूप से प्रस्तुत करने की अनुमति देता है।
import React, { Suspense } from 'react';
import Cards from './components/Cards';
import Category from './components/Category';
import Main from './components/Main';
import styles from './styles/Collection.module.scss'; const App = () => { return ( <div className={styles.wrapper}> <div className={cn('section-pb', styles.section)}> <div className={cn('container', styles.container)}> <div className={styles.row}> <Suspense fallback={<p>Loading.....</p>}> <Main /> <Cards /> </Suspense> </div> <div className={styles.sidebar}> <div className={styles.info}> Collections <span className={styles.smile} role="img" aria-label="fire"> 🔥 </span> </div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </div> </div> </div> );
}; export default App;
निष्कर्ष
अब उसके पास Suspense
, आप अपने ऐप को छोटी, स्टैंड-अलोन इकाइयों में विभाजित कर सकते हैं, जिन्हें बाकी ऐप के बिना अपने दम पर रेंडर किया जा सकता है, जिससे आपके उपयोगकर्ता को सामग्री पहले से कहीं अधिक तेज़ी से उपलब्ध हो सके। हमने तुलना के लिए विभिन्न डेटा लाने के तरीकों का पता लगाया।
इसे अपने प्रोजेक्ट में आज़माएं और हमें अपनी प्रतिक्रिया दें। आप शुरुआत कर सकते हैं लौकिक के साथ डेटा लाने का परीक्षण करने के लिए एक त्वरित सीएमएस के लिए Suspense
वेबसाइटों और ऐप्स के लिए।
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- स्रोत: https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- About
- ऊपर
- पहुँच
- सुलभ
- जोड़ता है
- लाभ
- को प्रभावित
- बाद
- करना
- सब
- की अनुमति दे
- की अनुमति देता है
- के बीच में
- और
- एपीआई
- अनुप्रयोग
- आवेदन
- अनुप्रयोगों
- दृष्टिकोण
- क्षुधा
- उपलब्ध
- अवतार
- Axios
- वापस
- बैक-एंड
- बैकएण्ड
- क्योंकि
- से पहले
- बेहतर
- के बीच
- ब्लॉकिंग
- तल
- टूटना
- दोष
- बनाया गया
- बंडल
- कॉल
- पा सकते हैं
- पत्ते
- मामला
- श्रेणियाँ
- वर्ग
- कारण
- चेक
- बच्चा
- विकल्प
- चुनें
- ग्राहक
- सीएमएस
- कोड
- संग्रह
- कैसे
- सामान्य
- तुलना
- तुलना
- पूरा करता है
- जटिल
- अंग
- घटकों
- निष्कर्ष
- समवर्ती
- शर्त
- सामग्री
- जारी रखने के
- मूल
- बनाना
- बनाया
- बनाना
- तिथि
- देरी
- उद्धार
- निर्भर करता है
- बनाया गया
- विकास
- विभिन्न
- प्रदर्शित करता है
- नहीं करता है
- कर
- dont
- आसान
- प्रभाव
- सक्षम
- त्रुटि
- और भी
- कार्यक्रम
- सब कुछ
- उदाहरण
- उदाहरण
- अपवाद
- अनुभव
- बताते हैं
- का पता लगाने
- पता लगाया
- विफल रहे
- फास्ट
- और तेज
- Feature
- विशेषताएं
- प्रतिक्रिया
- खोज
- आग
- प्रथम
- पहली बार
- फिक्स
- से
- पूरी तरह से
- समारोह
- कार्यों
- उत्पन्न
- मिल
- देना
- देता है
- Go
- महान
- होना
- हो जाता
- मदद
- कैसे
- एचटीएमएल
- HTTPS
- की छवि
- तुरंत
- में सुधार
- सुधार
- in
- सहित
- प्रारंभिक
- निवेश
- स्थापित
- एकीकृत
- एकीकरण
- बातचीत
- बातचीत
- अन्तरक्रियाशीलता
- इंटरफेस
- सहज ज्ञान युक्त
- IT
- खुद
- जावास्क्रिप्ट
- काम
- कुंजी
- बच्चा
- पिछली बार
- विलंब
- लंबाई
- चलें
- पुस्तकालयों
- लाइन
- LINK
- भार
- लोड हो रहा है
- भार
- लंबे समय तक
- लॉट
- बनाया गया
- मुख्य
- प्रमुख
- बनाना
- बनाता है
- निर्माण
- प्रबंध
- प्रबंध
- मर्ज के
- मेटाडाटा
- तरीका
- मोड
- मॉड्यूल
- अधिक
- माउंट
- विभिन्न
- प्राकृतिक
- पथ प्रदर्शन
- आवश्यकता
- नेटवर्क
- नया
- अगला
- वस्तु
- वस्तुओं
- ठीक है
- ONE
- संचालन
- ऑप्टिमाइज़ करें
- आदेश
- अन्य
- अपना
- समानांतर
- भाग
- भागों
- प्रदर्शन
- प्लेसहोल्डर
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- संभव
- शक्तिशाली
- व्यावहारिक
- सुंदर
- पिछला
- समस्याओं
- परियोजना
- वादा
- अच्छी तरह
- प्रदान करना
- प्रदान करता है
- प्रकाशित करना
- प्रकाशन
- त्वरित
- दौड़
- बिना सोचे समझे
- RE
- प्रतिक्रिया
- पढ़ना
- तैयार
- वास्तविक
- साकार
- रेडिट
- को कम करने
- प्रतिपादन
- renders
- कोष
- का अनुरोध
- अनुरोधों
- संकल्प
- प्रतिक्रिया
- बाकी
- परिणाम
- परिणाम
- वापसी
- वही
- स्क्रीन
- भावना
- सेवारत
- सेट
- सेटिंग्स
- कई
- दिखाना
- काफी
- को आसान बनाने में
- केवल
- थोड़ा अलग
- धीमा
- छोटा
- So
- समाधान ढूंढे
- प्रारंभ
- शुरू
- राज्य
- राज्य
- स्थिति
- फिर भी
- स्ट्रीमिंग
- सफलता
- सफलतापूर्वक
- समर्थन
- प्रणाली
- ले जा
- टीम
- परीक्षण
- RSI
- लेकिन हाल ही
- बात
- चीज़ें
- पहर
- बार
- शीर्षक
- सेवा मेरे
- ऊपर का
- कुल
- परंपरागत
- ट्रांसपेरेंसी
- ट्रिगर
- शुरू हो रहा
- ट्रिगर
- प्रकार
- आम तौर पर
- इकाइयों
- us
- उपयोग
- उपयोगकर्ता
- उपयोगकर्ता अनुभव
- उपयोगकर्ताओं
- ux
- मूल्य
- मान
- विभिन्न
- प्रतीक्षा
- इंतज़ार कर रही
- webp
- वेबसाइट
- वेबसाइटों
- क्या
- एचएमबी क्या है?
- कौन कौन से
- जब
- मर्जी
- अंदर
- बिना
- काम कर रहे
- होगा
- लपेटो
- लिपटा
- लिखना
- एक्सएमएल
- आपका
- यूट्यूब
- जेफिरनेट