Щоб забезпечити чудову взаємодію з користувачем веб-сайту, нам потрібно оптимізувати час завантаження першої початкової сторінки та швидкість реакції сторінки на взаємодію. Чим швидше ваша сторінка реагує на введення користувача – тим краще.
Реакція 18 був розроблений, щоб допомогти покращити інтерактивність за допомогою таких функцій, як селективна гідратація з Suspense
щоб зробити зволоження неблокуючим і надати нам більше прозорості щодо того, як наші архітектурний вибір вплине на UX і продуктивність нашої програми. React 18 значно покращує продуктивність і додає підтримку для Suspense
на серверному рендерингу (SSR), що дозволяє асинхронно обслуговувати частини програми, ви можете загорнути повільну частину вашої програми в компонент Suspense, наказавши React затримати завантаження повільного компонента.
Візуалізація на стороні сервера дозволяє генерувати HTML із компонентів React на сервері та надсилати цей HTML своїм користувачам. SSR дозволяє вашим користувачам побачити вміст сторінки до того, як ваш пакет JavaScript завантажиться та запуститься, після чого код JavaScript завантажиться та з’єднається з HTML, додаючи обробники подій, що є гідратація. На відміну від традиційної потокової передачі 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
Потім створіть a безкоштовний акаунт Cosmic і йди до Космічна панель приладів Your Bucket > Settings > API Access
і знайдіть свій слаг Bucket і ключ читання API та додайте їх до створення функції вибірки 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 також надає потужні функції моделювання вмісту, які дозволяють створювати будь-який вміст надшвидкої та багатоканальної публікації, щоб створити один раз і опублікувати всюди.
Отримання при візуалізації
Підхід Fetch-on-render мережевий запит запускається в самому компоненті після монтування, запит не запускається, доки компонент не візуалізується. Якщо ви не напишете функцію очищення, яка ігнорує застарілі відповіді, ви помітите a стан перегонів (у 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
, тоді дочірній компонент не може навіть почати отримання, доки батьківський компонент не завершить отримання. Ці типи проблем із продуктивністю дуже поширені в односторінкових програмах і спричиняють набагато більшу повільність, ніж «надмірне повторне рендеринг». Якщо у нас є складна програма з кількома паралельними запитами, ми побачимо різні частини програми, які завантажуються у випадковому порядку. . Більш природною поведінкою програми є відтворення речей зверху вниз.
Візуалізуйте як ви отримуєте
Підхід рендерингу як ви отримуєте дозволяє нам починати рендеринг нашого компонента відразу після запуску мережевого запиту, і ми починаємо рендеринг практично відразу після запуску мережевого запиту.
Припинення отримання даних
За допомогою Suspense ми не чекаємо відповіді, перш ніж почати рендеринг, і зменшуємо загальний час блокування (TBT) нашого прикладу зі 106 мс до 56 мс.
Основна команда React набір одночасних функцій для полегшення отримання даних у React. Невідомість Серед них і спрямований на спрощення керування станами завантаження в компонентах React. Це функція для керування асинхронними операціями в програмі React, яку ви також можете використовувати <Suspense>
щоб декларативно «чекати» чогось іншого, включаючи дані, і більше не потрібно чекати, поки завантажиться весь JavaScript, щоб почати зволоження частин сторінки.
По-перше, ми запускаємо мережевий запит перед відтворенням будь-яких компонентів у першому рядку. В основному 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
Нам також потрібна логіка перенесення даних, щоб створити виняток, коли наші компоненти завантажують дані або це не вдалося, а потім просто повернути відповідь, коли 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.
Тепер нам потрібно обернути функції космічного виклику в 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
для веб-сайтів і програм.
- Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
- Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
- джерело: https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- МЕНЮ
- вище
- доступ
- доступною
- Додає
- Перевага
- впливати
- після
- Цілі
- ВСІ
- Дозволити
- дозволяє
- серед
- та
- API
- додаток
- додаток
- застосування
- підходи
- додатка
- доступний
- аватар
- Axios
- назад
- Back-end
- Backend
- оскільки
- перед тим
- Краще
- між
- блокування
- дно
- Перерва
- Помилка
- побудований
- Пакет
- call
- Може отримати
- Cards
- випадок
- категорії
- Категорія
- Викликати
- перевірка
- дитина
- вибір
- Вибирати
- клієнт
- См
- код
- Колекції
- Приходити
- загальний
- порівняти
- порівняння
- Завершує
- комплекс
- компонент
- Компоненти
- висновок
- одночасно
- стан
- зміст
- продовжувати
- Core
- створювати
- створений
- створення
- дані
- затримка
- доставляти
- Залежно
- призначений
- розробка
- різний
- дисплеїв
- Ні
- справи
- Не знаю
- легше
- ефект
- включіть
- помилка
- Навіть
- Event
- все
- приклад
- Приклади
- виняток
- досвід
- Пояснює
- дослідити
- Розвіданий
- не вдалося
- ШВИДКО
- швидше
- особливість
- риси
- зворотний зв'язок
- знайти
- Пожежа
- Перший
- перший раз
- виправляти
- від
- повністю
- функція
- Функції
- породжувати
- отримати
- Давати
- дає
- Go
- великий
- траплятися
- відбувається
- допомога
- Як
- HTML
- HTTPS
- зображення
- негайно
- удосконалювати
- поліпшення
- in
- У тому числі
- початковий
- вхід
- встановлювати
- інтегрувати
- інтеграція
- взаємодіяти
- взаємодія
- інтерактивність
- інтерфейс
- інтуїтивний
- IT
- сам
- JavaScript
- робота
- ключ
- Дитина
- останній
- Затримка
- довжина
- дозволяє
- libraries
- Лінія
- LINK
- загрузка
- погрузка
- вантажі
- довше
- серія
- made
- головний
- основний
- зробити
- РОБОТИ
- Робить
- управління
- управління
- зливається
- метадані
- метод
- режим
- Модулі
- більше
- МОНТАЖ
- множинний
- Природний
- навігація
- Необхідність
- мережу
- Нові
- наступний
- об'єкт
- об'єкти
- добре
- ONE
- операції
- Оптимізувати
- порядок
- Інше
- власний
- Паралельні
- частина
- частини
- продуктивність
- заповнювач
- plato
- Інформація про дані Платона
- PlatoData
- це можливо
- потужний
- Практичний
- досить
- попередній
- проблеми
- проект
- обіцянку
- правильно
- забезпечувати
- забезпечує
- публікувати
- Видавничий
- Швидко
- Гонки
- випадковий
- RE
- Реагувати
- Читати
- готовий
- реальний
- розуміючи,
- зменшити
- надання
- надає
- Сховище
- запросити
- запитів
- вирішене
- відповідь
- REST
- результат
- результати
- повертати
- то ж
- Екрани
- сенс
- виступаючої
- комплект
- налаштування
- кілька
- Показувати
- істотно
- спростити
- просто
- трохи відрізняється
- сповільнювати
- невеликий
- So
- Рішення
- старт
- почалася
- стан
- Штати
- Статус
- Як і раніше
- потоковий
- успіх
- Успішно
- підтримка
- система
- взяття
- команда
- тест
- Команда
- їх
- річ
- речі
- час
- times
- назва
- до
- топ
- Усього:
- традиційний
- прозорість
- викликати
- спрацьовує
- спрацьовування
- Типи
- типово
- одиниць
- us
- використання
- користувач
- User Experience
- користувачі
- ux
- значення
- Цінності
- різний
- чекати
- Очікування
- webp
- веб-сайт
- веб-сайти
- Що
- Що таке
- який
- в той час як
- волі
- в
- без
- робочий
- б
- обернути
- Загорнуті
- запис
- XML
- вашу
- YouTube
- зефірнет