ویب سائٹ کے صارف کو ایک بہترین تجربہ فراہم کرنے کے لیے، ہمیں صفحہ کے پہلے لوڈ وقت اور تعامل کے لیے صفحہ کی ردعمل کو بہتر بنانے کی ضرورت ہے۔ جتنی تیزی سے آپ کا صفحہ صارف کے ان پٹ کا جواب دے گا – اتنا ہی بہتر ہے۔
رد عمل 18 جیسی خصوصیات کے ساتھ تعامل کو بہتر بنانے میں مدد کے لیے ڈیزائن کیا گیا تھا۔ منتخب ہائیڈریشن ساتھ Suspense
ہائیڈریشن کو نان بلاک کرنے اور ہمیں اس بارے میں مزید شفافیت فراہم کرنے کے لیے کہ ہمارے ارکیٹیکچرل انتخاب ہماری ایپ کے UX اور کارکردگی کو متاثر کریں گے۔ React 18 کارکردگی میں بڑی بہتری لاتا ہے اور اس کے لیے تعاون شامل کرتا ہے۔ Suspense
سرور سائیڈ رینڈرنگ (SSR) پر کسی ایپ کے حصوں کو غیر مطابقت پذیر طور پر پیش کرنے کی اجازت دیتے ہوئے، آپ اپنی ایپ کے سست حصے کو سسپنس جزو کے اندر لپیٹ سکتے ہیں، اور ردعمل کو سست جزو کی لوڈنگ میں تاخیر کرنے کے لیے کہہ سکتے ہیں۔
سرور سائیڈ رینڈرنگ آپ کو سرور پر React اجزاء سے HTML بنانے، اور وہ HTML اپنے صارفین کو بھیجنے دیتی ہے۔ SSR آپ کے صارفین کو آپ کے JavaScript بنڈل کے لوڈ ہونے اور چلنے سے پہلے صفحہ کا مواد دیکھنے دیتا ہے، جس کے بعد JavaScript کوڈ لوڈ ہوتا ہے اور HTML کے ساتھ ضم ہوجاتا ہے، ایونٹ ہینڈلرز کو منسلک کرتا ہے - جو کہ نمی. روایتی ایچ ٹی ایم ایل سٹریمنگ کے برعکس، اسے اوپر سے نیچے کی ترتیب میں ہونا ضروری نہیں ہے۔
ساتھ Suspense
آپ React سے کہہ سکتے ہیں کہ پہلے دوسرے اجزاء کے لیے HTML بھیجے اور ساتھ ہی پلیس ہولڈر کے لیے HTML بھیجے، جیسے لوڈنگ اسپنر۔ یہ نمایاں طور پر صارف کے تجربے اور صارف کے خیال میں تاخیر کو بہتر بناتا ہے۔
میں دو بڑی SSR خصوصیات ہیں۔ رد عمل 18 کو سسپنس کے ذریعے غیر مقفل کیا گیا۔:
- سرور پر ایچ ٹی ایم ایل کو اسٹریم کرنا۔
- کلائنٹ پر سلیکٹیو ہائیڈریشن۔
آئیے دریافت کریں۔ رد عمل کا ڈیٹا لانے کے طریقے ساتھ useEffect
اور Suspense
بیک اینڈ ڈیٹا حاصل کرنے والے عملی حل کا موازنہ کرنے کی کوشش کریں، ہمارے معاملے میں ہم ایک تیز اور بدیہی ہیڈ لیس CMS کا انتخاب کرتے ہیں۔ برہمانڈیی. ہمارے کوڈ کی مثالیں آپ لنک کے ذریعے چیک کر سکتے ہیں۔ StackBlitz.
انٹیگریشن Cosmic Headless CMS
ڈیٹا لانے کے لیے ہم استعمال کرتے ہیں۔ کائناتی ہیڈ لیس CMS بیک اینڈ اونلی کنٹینٹ مینجمنٹ سسٹم (سی ایم ایس) ایک بیک اینڈ اونلی کنٹینٹ مینجمنٹ سسٹم (سی ایم ایس) ہے، جو مواد کے ذخیرے کے طور پر زمین سے بنایا گیا ہے جو مواد کو قابل رسائی بناتا ہے۔ Cosmic سے اقدار کو ضم کرنے اور حاصل کرنے کے لیے، ہمیں آپ کے پروجیکٹ میں Cosmic ماڈیول انسٹال کرنے کی ضرورت ہے۔
npm i cosmicjs yarn add cosmicjs
پھر ایک بنائیں مفت کائناتی اکاؤنٹ اور جاؤ کاسمک ڈیش بورڈ Your Bucket > Settings > API Access
اور اپنی بالٹی سلگ اور API ریڈ کلید تلاش کریں اور انہیں Cosmic fetch فنکشن بنانے میں شامل کریں۔ 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 }; }
}
Cosmic طاقتور مواد کی ماڈلنگ کی خصوصیات بھی فراہم کرتا ہے جو آپ کو کسی بھی قسم کا مواد انتہائی تیز اور ملٹی چینل پبلشنگ بنانے دیتا ہے، تاکہ ایک بار تخلیق کریں اور ہر جگہ شائع کریں۔
فیچ آن رینڈر
فیچ آن رینڈر اپروچ نیٹ ورک کی درخواست کو ماؤنٹ کرنے کے بعد جزو میں ہی ٹرگر کیا جاتا ہے، جب تک کہ جزو رینڈر نہیں ہوتا درخواست کو متحرک نہیں کیا جاتا ہے۔ اگر آپ کلین اپ فنکشن نہیں لکھتے ہیں جو باسی جوابات کو نظر انداز کرتا ہے، تو آپ دیکھیں گے a ریس کی حالت (رد عمل میں) بگ جب ڈیٹا کے لیے دو قدرے مختلف درخواستیں کی جاتی ہیں، اور ایپلیکیشن اس بات پر منحصر ہوتی ہے کہ کون سی درخواست پہلے مکمل ہوتی ہے۔ درحقیقت ری ایکٹ 18 پر، اگر آپ اپنی ایپلیکیشن میں StrictMode کو فعال کرتے ہیں، تو ڈیولپمنٹ موڈ میں آپ کو پتہ چل جائے گا کہ useEffect کے استعمال سے دو بار درخواست کی جائے گی، کیونکہ اب React آپ کے اجزاء کو ماؤنٹ کرے گا، ڈسماؤنٹ کرے گا، اور پھر اسے دوبارہ ماؤنٹ کرے گا، یہ چیک کرنے کے لیے کہ آیا آپ کا کوڈ ہے یا نہیں۔ ٹھیک سے کام کر رہا ہے.
آئیے اس کا فائدہ اٹھا کر ڈیٹا لانے والی ریس کی حالت کو ٹھیک کریں۔ 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
، پھر چائلڈ کمپوننٹ اس وقت تک بازیافت کرنا شروع نہیں کرسکتا جب تک کہ پیرنٹ جز کی بازیافت ختم نہ ہوجائے۔ اس قسم کی کارکردگی کے مسائل سنگل پیج ایپس میں بہت عام ہیں اور "زیادہ سے زیادہ ری رینڈرنگ" کے مقابلے میں بہت زیادہ سست روی کا سبب بنتے ہیں اور اگر ہمارے پاس متعدد متوازی درخواستوں کے ساتھ ایک پیچیدہ ایپلی کیشن ہے، تو ہم ایپلیکیشن لوڈ کے مختلف حصوں کو بے ترتیب ترتیب میں دیکھیں گے۔ . کسی ایپلیکیشن کے لیے زیادہ فطری رویہ چیزوں کو اوپر سے نیچے تک رینڈر کرنا ہے۔
رینڈر جیسا کہ آپ لاتے ہیں۔
رینڈر جیسا کہ آپ لائیں اپروچ ہمیں نیٹ ورک کی درخواست کو ٹرگر کرنے کے فوراً بعد اپنے اجزاء کو رینڈر کرنا شروع کرنے دیتا ہے اور ہم نیٹ ورک کی درخواست کو شروع کرنے کے فوراً بعد رینڈر کرنا شروع کر دیتے ہیں۔
ڈیٹا کی بازیافت کے لیے سسپنس
سسپنس کے ساتھ، ہم رینڈرنگ شروع کرنے اور اپنی مثال کے ٹوٹل بلاکنگ ٹائم (TBT) کو 106ms سے 56ms تک کم کرنے سے پہلے جواب کے واپس آنے کا انتظار نہیں کرتے ہیں۔
React کور ٹیم نے React میں ڈیٹا کی بازیافت کو آسان بنانے کے لیے کنکرنٹ فیچرز کا سیٹ کیا۔ رہسی ان میں سے ہے، اور اس کا مقصد React اجزاء میں لوڈنگ سٹیٹس کے انتظام کو آسان بنانا ہے۔ یہ ایک React ایپ میں غیر مطابقت پذیر کارروائیوں کا نظم کرنے کی خصوصیت ہے اور آپ کو بھی استعمال کرنے دیتی ہے۔ <Suspense>
کسی بھی چیز کا اعلانیہ طور پر "انتظار" کرنے کے لیے، بشمول ڈیٹا، اور صفحہ کے حصوں کو ہائیڈریٹ کرنے کے لیے تمام JavaScript کے لوڈ ہونے کا انتظار نہیں کرنا پڑے گا۔
سب سے پہلے، ہم لائن ون پر کسی بھی اجزاء کو پیش کرنے سے پہلے نیٹ ورک کی درخواست کو متحرک کرتے ہیں۔ مرکز میں 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
ڈیٹا حاصل کرنے کے لیے یہ کوئی نیا انٹرفیس نہیں ہے، کیونکہ یہ کام اب بھی لائبریریوں جیسے fetch یا Axios کو سونپا جاتا ہے، اور 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
اور ایک بار حاصل کریں۔
اجزاء میں موجود ڈیٹا کو پڑھیں
ایک بار جب ہر چیز چیزوں کی بازیافت کی طرف لپیٹ دی جاتی ہے، تو ہم اسے اپنے اجزاء میں استعمال کرنا چاہتے ہیں۔ تو کیا ہو رہا ہے جب ہم جزو کو کہتے ہیں، the 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
ہماری ایپلی کیشنز میں زیر التواء ریاستوں تک React کو رسائی فراہم کرتا ہے اور اسی وجہ سے React کو معلوم ہوتا ہے کہ نیٹ ورک کال ہو رہی ہے، یہ ہمیں انتظار کے دوران اعلانیہ طور پر فال بیک جزو پیش کرنے کی اجازت دیتا ہے۔
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
، آپ اپنی ایپ کو چھوٹے، اسٹینڈ اکیلے اکائیوں میں توڑ سکتے ہیں جو بقیہ ایپ کے بغیر خود ہی پیش کیے جا سکتے ہیں، جس سے مواد آپ کے صارف کو پہلے سے کہیں زیادہ تیزی سے دستیاب ہو سکتا ہے۔ ہم نے موازنہ کے لیے ڈیٹا حاصل کرنے کے مختلف طریقوں کی کھوج کی۔
اسے اپنے پروجیکٹ میں آزمائیں اور ہمیں اپنی رائے دیں۔ آپ کے ساتھ شروع کر سکتے ہیں برہمانڈیی ڈیٹا کی بازیافت کی جانچ کرنے کے لیے فوری CMS کے لیے Suspense
ویب سائٹس اور ایپس کے لیے۔
- SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- ہمارے بارے میں
- اوپر
- تک رسائی حاصل
- قابل رسائی
- جوڑتا ہے
- فائدہ
- پر اثر انداز
- کے بعد
- مقصد ہے
- تمام
- اجازت دے رہا ہے
- کی اجازت دیتا ہے
- کے درمیان
- اور
- اے پی آئی
- اپلی کیشن
- درخواست
- ایپلی کیشنز
- نقطہ نظر
- ایپس
- دستیاب
- اوتار
- Axios
- واپس
- پیچھے کے آخر میں
- پسدید
- کیونکہ
- اس سے پہلے
- بہتر
- کے درمیان
- مسدود کرنے میں
- پایان
- توڑ
- بگ کی اطلاع دیں
- تعمیر
- بنڈل
- فون
- حاصل کر سکتے ہیں
- کارڈ
- کیس
- اقسام
- قسم
- کیونکہ
- چیک کریں
- بچے
- انتخاب
- میں سے انتخاب کریں
- کلائنٹ
- سینٹی میٹر
- کوڈ
- مجموعے
- کس طرح
- کامن
- موازنہ
- موازنہ
- مکمل کرتا ہے
- پیچیدہ
- جزو
- اجزاء
- اختتام
- سمورتی
- شرط
- مواد
- جاری
- کور
- تخلیق
- بنائی
- تخلیق
- اعداد و شمار
- تاخیر
- نجات
- منحصر ہے
- ڈیزائن
- ترقی
- مختلف
- دکھاتا ہے
- نہیں کرتا
- کر
- نہیں
- آسان
- اثر
- کو چالو کرنے کے
- خرابی
- بھی
- واقعہ
- سب کچھ
- مثال کے طور پر
- مثال کے طور پر
- رعایت
- تجربہ
- بیان کرتا ہے
- تلاش
- وضاحت کی
- ناکام
- فاسٹ
- تیز تر
- نمایاں کریں
- خصوصیات
- آراء
- مل
- آگ
- پہلا
- پہلی بار
- درست کریں
- سے
- مکمل طور پر
- تقریب
- افعال
- پیدا
- حاصل
- دے دو
- فراہم کرتا ہے
- Go
- عظیم
- ہو
- ہوتا ہے
- مدد
- کس طرح
- HTML
- HTTPS
- تصویر
- فوری طور پر
- کو بہتر بنانے کے
- بہتری
- in
- سمیت
- ابتدائی
- ان پٹ
- انسٹال
- ضم
- انضمام
- بات چیت
- بات چیت
- انٹرایکٹیویٹی
- انٹرفیس
- بدیہی
- IT
- خود
- جاوا سکرپٹ
- ایوب
- کلیدی
- بچے
- آخری
- تاخیر
- لمبائی
- آو ہم
- لائبریریوں
- لائن
- LINK
- لوڈ
- لوڈ کر رہا ہے
- بوجھ
- اب
- بہت
- بنا
- مین
- اہم
- بنا
- بناتا ہے
- بنانا
- انتظام
- مینیجنگ
- انضمام
- میٹا ڈیٹا
- طریقہ
- موڈ
- ماڈیول
- زیادہ
- چڑھکر
- ایک سے زیادہ
- قدرتی
- سمت شناسی
- ضرورت ہے
- نیٹ ورک
- نئی
- اگلے
- اعتراض
- اشیاء
- ٹھیک ہے
- ایک
- آپریشنز
- کی اصلاح کریں
- حکم
- دیگر
- خود
- متوازی
- حصہ
- حصے
- کارکردگی
- پلیس ہولڈر
- پلاٹا
- افلاطون ڈیٹا انٹیلی جنس
- پلیٹو ڈیٹا
- ممکن
- طاقتور
- عملی
- خوبصورت
- پچھلا
- مسائل
- منصوبے
- وعدہ
- مناسب طریقے سے
- فراہم
- فراہم کرتا ہے
- شائع
- پبلشنگ
- فوری
- ریس
- بے ترتیب
- RE
- جواب دیں
- پڑھیں
- تیار
- اصلی
- احساس کرنا
- اٹ
- کو کم
- رینڈرنگ
- دیتا
- ذخیرہ
- درخواست
- درخواستوں
- حل کیا
- جواب
- باقی
- نتیجہ
- نتائج کی نمائش
- واپسی
- اسی
- سکرین
- احساس
- خدمت
- مقرر
- ترتیبات
- کئی
- دکھائیں
- نمایاں طور پر
- آسان بنانے
- صرف
- تھوڑا سا مختلف
- سست
- چھوٹے
- So
- حل
- شروع کریں
- شروع
- حالت
- امریکہ
- درجہ
- ابھی تک
- محرومی
- کامیابی
- کامیابی کے ساتھ
- حمایت
- کے نظام
- لینے
- ٹیم
- ٹیسٹ
- ۔
- ان
- بات
- چیزیں
- وقت
- اوقات
- عنوان
- کرنے کے لئے
- سب سے اوپر
- کل
- روایتی
- شفافیت
- ٹرگر
- متحرک
- ٹرگر
- اقسام
- عام طور پر
- یونٹس
- us
- استعمال کی شرائط
- رکن کا
- صارف کا تجربہ
- صارفین
- ux
- قیمت
- اقدار
- مختلف
- انتظار
- انتظار کر رہا ہے
- ویبپی
- ویب سائٹ
- ویب سائٹ
- کیا
- کیا ہے
- جس
- جبکہ
- گے
- کے اندر
- بغیر
- کام کر
- گا
- لپیٹو
- لپیٹ
- لکھنا
- XML
- اور
- یو ٹیوب پر
- زیفیرنیٹ