برای ارائه یک تجربه کاربری عالی وب سایت، باید اولین زمان بارگذاری صفحه اولیه و پاسخگویی صفحه به تعامل را بهینه کنیم. هرچه صفحه شما سریعتر به ورودی کاربر پاسخ دهد - بهتر است.
واکنش 18 برای کمک به بهبود تعامل با ویژگی هایی مانند هیدراتاسیون انتخابی با Suspense
تا هیدراتاسیون را غیر انسداد کند و شفافیت بیشتری در مورد نحوه عملکرد ما به ما ارائه دهد معماری انتخاب ها بر UX و عملکرد برنامه ما تأثیر می گذارد. React 18 بهبودهای عمده ای در عملکرد ایجاد می کند و پشتیبانی را برای آن اضافه می کند Suspense
در رندر سمت سرور (SSR) که امکان سرویس دهی به بخش هایی از برنامه را به صورت ناهمزمان ممکن می کند، می توانید بخش آهسته برنامه خود را در مولفه Suspense قرار دهید و به React بگویید بارگذاری مؤلفه کند را به تاخیر بیندازد.
Server-side rendering lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs, after which the JavaScript code loads and merges with the HTML, attaching event handlers – which is هیدراتاسیون. برخلاف استریم سنتی HTML، لزومی ندارد که به ترتیب بالا به پایین اتفاق بیفتد.
با Suspense
، می توانید به React بگویید که ابتدا HTML را برای سایر مؤلفه ها به همراه HTML برای مکان نگهدارنده ارسال کند، مانند اسپینر در حال بارگذاری. به طور قابل توجهی تجربه کاربر و تاخیر درک شده توسط کاربر را بهبود می بخشد.
دو ویژگی عمده SSR در آن وجود دارد React 18 توسط Suspense آنلاک شده است:
- استریم HTML روی سرور
- هیدراتاسیون انتخابی روی مشتری
بیایید کاوش کنیم رویکردهای واکشی داده React با useEffect
و Suspense
سعی کنید راه حل های عملی واکشی داده های پشتیبان را با هم مقایسه کنید، در مورد ما یک CMS سریع و شهودی بدون هد انتخاب می کنیم. کیهانی. نمونه های کد ما را می توانید با یک پیوند بررسی کنید StackBlitz.
یکپارچه سازی Cosmic Headless CMS
برای واکشی داده ها استفاده می کنیم CMS بدون سر کیهانی یک سیستم مدیریت محتوا فقط پشتیبان (CMS) یک سیستم مدیریت محتوا (CMS) است که از ابتدا به عنوان یک مخزن محتوا ساخته شده است که محتوا را در دسترس قرار می دهد. برای ادغام و دریافت مقادیر از Cosmic، باید ماژول Cosmic را در پروژه شما نصب کنیم.
npm i cosmicjs yarn add cosmicjs
سپس یک را ایجاد کنید حساب رایگان کیهانی و رفتن به داشبورد کیهانی Your Bucket > Settings > API Access
و کلید خواندن Bucket Slug و API خود را پیدا کنید و آنها را به ایجاد تابع Fetch Cosmic اضافه کنید 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 همچنین ویژگیهای قدرتمند مدلسازی محتوا را ارائه میکند که به شما امکان میدهد هر نوع محتوایی را با سرعت فوقالعاده و انتشار چند کانالی ایجاد کنید تا متوجه شوید یک بار ایجاد کنید و همه جا منتشر کنید.
واکشی در رندر
رویکرد واکشی در رندر درخواست شبکه پس از نصب در خود کامپوننت فعال می شود، درخواست تا زمانی که کامپوننت ارائه نشود، راه اندازی نمی شود. اگر یک تابع پاکسازی که پاسخ های قدیمی را نادیده می گیرد، ننویسید، متوجه خواهید شد شرایط مسابقه (در React) هنگامی که دو درخواست کمی متفاوت برای داده انجام شده باشد، و برنامه بسته به اینکه کدام درخواست اول تکمیل شود، نتیجه متفاوتی را نشان می دهد، باگ می کند. در واقع در React 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;
علاوه بر این، اگر یک مؤلفه چندین بار رندر شود (همانطور که معمولاً انجام می دهند)، جلوه قبلی قبل از اجرای افکت بعدی پاک می شود.
در این مورد، ما هنوز یک شرط مسابقه داریم به این معنا که چندین درخواست به Cosmic در حین پرواز خواهد بود، اما فقط از نتایج آخرین مورد استفاده خواهد شد.
همچنین به عنوان دن آبراموف توضیح می دهد، واکشی در رندر ناوبری آهسته بین صفحه نمایش را فراهم می کند. اگر تو داری اجزای والد و فرزند هر دو در حال واکشی هستند useEffects
، سپس مؤلفه فرزند حتی نمی تواند واکشی را شروع کند تا زمانی که مؤلفه والد واکشی را به پایان برساند. این نوع مشکلات عملکرد در اپلیکیشنهای تک صفحهای بسیار رایج هستند و باعث کندی بسیار بیشتری نسبت به “رندر مجدد بیش از حد” میشوند و اگر یک برنامه پیچیده با چندین درخواست موازی داشته باشیم، قسمتهای مختلف برنامه را به ترتیب تصادفی بارگذاری میکنیم. . رفتار طبیعی تر برای یک برنامه کاربردی این است که چیزها را از بالا به پایین ارائه دهد.
رندر همانطور که شما واکشی کنید
رویکرد Render-as-You-You-Fach به ما اجازه می دهد بلافاصله پس از راه اندازی درخواست شبکه، رندر کردن مؤلفه خود را آغاز کنیم و تقریباً بلافاصله پس از شروع درخواست شبکه، رندر را شروع می کنیم.
تعلیق برای واکشی داده ها
با Suspense، قبل از شروع رندر، منتظر بازگشت پاسخ نمیمانیم و زمان انسداد کل (TBT) نمونه خود را از 106 میلیثانیه به 56 میلیثانیه کاهش میدهیم.
مجموعهای از ویژگیهای همزمان تیم اصلی React برای آسانتر کردن واکشی دادهها در React. در حال تعلیق یکی از این موارد است و هدف آن سادهسازی مدیریت حالتهای بارگذاری در مؤلفههای React است. این ویژگی برای مدیریت عملیات ناهمزمان در یک برنامه React است و به شما امکان می دهد از آن نیز استفاده کنید <Suspense>
به طور اعلانی برای هر چیز دیگری، از جمله دادهها، «منتظر» شوید و دیگر لازم نیست منتظر بارگذاری تمام جاوا اسکریپت برای شروع آبرسانی بخشهای صفحه باشید.
ابتدا، درخواست شبکه را قبل از رندر کردن هر مؤلفه در خط یک راه اندازی می کنیم. در اصل App
جزء، ما هر دو را می پیچیم Category
و Cards
, Main
اجزا به صورت جداگانه Suspense
مولفه ها با بک گراندهایشان
چه زمانی App
برای اولین بار سوار می شود، سعی می کند رندر کند Category
و این باعث می شود resourseCategories.read()
خط اگر داده ها هنوز آماده نیستند (یعنی درخواست حل نشده است)، به Suspense ارسال می شود، که سپس رندر می شود. <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
ما همچنین به منطق واکشی wrap نیاز داریم، تا زمانی که اجزای ما در حال بارگیری دادهها هستند یا شکست خوردهاند، یک استثنا ایجاد کنیم، اما پس از آن به سادگی پاسخ را برگردانیم. Promise
با موفقیت حل می شود و اگر هنوز معلق باشد، 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
به عنوان یک متد عمل می کند، و این همان چیزی است که اجزای React ما برای بازیابی مقدار Promise با آن تعامل خواهند داشت.
اکنون باید توابع فراخوانی Cosmic را در آن قرار دهیم 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 و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- درباره ما
- بالاتر
- دسترسی
- در دسترس
- می افزاید:
- مزیت - فایده - سود - منفعت
- اثر
- پس از
- اهداف
- معرفی
- اجازه دادن
- اجازه می دهد تا
- در میان
- و
- API
- نرم افزار
- کاربرد
- برنامه های کاربردی
- رویکردها
- برنامه های
- در دسترس
- نماد
- Axios
- به عقب
- بازگشت پایان
- بخش مدیریت
- زیرا
- قبل از
- بهتر
- میان
- انسداد
- پایین
- شکستن
- اشکال
- ساخته
- بسته
- صدا
- می توانید دریافت کنید
- کارت ها
- مورد
- دسته
- دسته بندی
- علت
- بررسی
- کودک
- انتخاب
- را انتخاب کنید
- مشتری
- اس ام اس
- رمز
- مجموعه
- بیا
- مشترک
- مقايسه كردن
- مقایسه
- تکمیل شده
- پیچیده
- جزء
- اجزاء
- نتیجه
- رقیب
- شرط
- محتوا
- ادامه دادن
- هسته
- ایجاد
- ایجاد شده
- ایجاد
- داده ها
- تاخیر
- ارائه
- بستگی دارد
- طراحی
- پروژه
- مختلف
- صفحه نمایش
- نمی کند
- عمل
- آیا
- آسان تر
- اثر
- قادر ساختن
- خطا
- حتی
- واقعه
- همه چیز
- مثال
- مثال ها
- استثنا
- تجربه
- توضیح می دهد
- اکتشاف
- کشف
- ناموفق
- FAST
- سریعتر
- ویژگی
- امکانات
- باز خورد
- پیدا کردن
- آتش
- نام خانوادگی
- بار اول
- رفع
- از جانب
- کاملا
- تابع
- توابع
- تولید می کنند
- دریافت کنید
- دادن
- می دهد
- Go
- بزرگ
- رخ دادن
- اتفاق می افتد
- کمک
- چگونه
- HTML
- HTTPS
- تصویر
- بلافاصله
- بهبود
- ارتقاء
- in
- از جمله
- اول
- ورودی
- نصب
- ادغام
- ادغام
- تعامل
- اثر متقابل
- تعامل
- رابط
- حسی
- IT
- خود
- جاوا اسکریپت
- کار
- کلید
- نوع
- نام
- تاخیر
- طول
- اجازه می دهد تا
- کتابخانه ها
- لاین
- ارتباط دادن
- بار
- بارگیری
- بارهای
- دیگر
- خیلی
- ساخته
- اصلی
- عمده
- ساخت
- باعث می شود
- ساخت
- مدیریت
- مدیریت
- ادغام می شود
- متاداده
- روش
- حالت
- واحد
- بیش
- استقرار (mount)
- چندگانه
- طبیعی
- جهت یابی
- نیاز
- شبکه
- جدید
- بعد
- هدف
- اشیاء
- خوب
- ONE
- عملیات
- بهینه سازی
- سفارش
- دیگر
- خود
- موازی
- بخش
- بخش
- کارایی
- حفره یا سوراخ
- افلاطون
- هوش داده افلاطون
- PlatoData
- ممکن
- قوی
- عملی
- زیبا
- قبلی
- مشکلات
- پروژه
- وعده
- به درستی
- ارائه
- فراهم می کند
- منتشر کردن
- انتشار
- سریع
- نژاد
- تصادفی
- RE
- واکنش نشان می دهند
- خواندن
- اماده
- واقعی
- تحقق
- ق
- كاهش دادن
- تفسیر
- ارائه
- مخزن
- درخواست
- درخواست
- مصمم
- پاسخ
- REST
- نتیجه
- نتایج
- برگشت
- همان
- صفحه نمایش
- حس
- خدمت
- تنظیم
- تنظیمات
- چند
- نشان
- به طور قابل توجهی
- ساده کردن
- به سادگی
- کمی متفاوت
- کند
- کوچک
- So
- مزایا
- شروع
- آغاز شده
- دولت
- ایالات
- وضعیت
- هنوز
- جریان
- موفقیت
- موفقیت
- پشتیبانی
- سیستم
- مصرف
- تیم
- آزمون
- La
- شان
- چیز
- اشیاء
- زمان
- بار
- عنوان
- به
- بالا
- جمع
- سنتی
- شفافیت
- ماشه
- باعث شد
- راه اندازی
- انواع
- به طور معمول
- واحد
- us
- استفاده کنید
- کاربر
- سابقه کاربر
- کاربران
- ux
- ارزش
- ارزشها
- مختلف
- صبر کنيد
- منتظر
- وب سایت
- سایت اینترنتی
- وب سایت
- چی
- چه شده است
- که
- در حین
- اراده
- در داخل
- بدون
- کارگر
- خواهد بود
- بسته بندی کردن
- پیچیده
- نوشتن
- XML
- شما
- یوتیوب
- زفیرنت