Стратегія кешування React Suspense: Опанування управлінням кешем завантаження даних

React Suspense, представлений як частина функцій конкурентного режиму React, надає декларативний спосіб обробки станів завантаження у вашому застосунку. У поєднанні з надійними стратегіями кешування, Suspense може значно покращити сприйману продуктивність та взаємодію з користувачем, запобігаючи непотрібним мережевим запитам та надаючи миттєвий доступ до раніше отриманих даних. Цей посібник глибоко занурюється у впровадження ефективних методів завантаження даних та управління кешем за допомогою React Suspense.

Розуміння React Suspense

За своєю суттю, React Suspense — це компонент, який обгортає частини вашого застосунку, що можуть "призупинятися", тобто вони можуть бути не відразу готові до рендерингу, оскільки чекають на завантаження даних. Коли компонент призупиняється, Suspense відображає резервний інтерфейс (наприклад, спіннер завантаження), доки дані не стануть доступними. Як тільки дані готові, Suspense замінює резервний інтерфейс на фактичний компонент.

Ключові переваги використання React Suspense включають:

• Декларативні стани завантаження: Визначайте стани завантаження безпосередньо у вашому дереві компонентів без необхідності керувати булевими прапорцями або складною логікою стану.
• Покращена взаємодія з користувачем: Надавайте негайний зворотний зв'язок користувачеві під час завантаження даних, зменшуючи відчутну затримку.
• Розділення коду (Code Splitting): Легко завантажуйте компоненти та пакети коду за запитом, додатково покращуючи початковий час завантаження.
• Паралельне отримання даних: Отримуйте дані паралельно, не блокуючи основний потік, забезпечуючи чутливий інтерфейс користувача.

Потреба у кешуванні даних

Хоча Suspense обробляє стан завантаження, він не керує кешуванням даних за замовчуванням. Без кешування, кожне повторне відтворення або навігація до раніше відвіданої секції вашого застосунку може спричинити новий мережевий запит, що призводить до:

• Збільшення затримки: Користувачі відчувають затримки, чекаючи на повторне отримання даних.
• Збільшення навантаження на сервер: Непотрібні запити навантажують ресурси сервера та збільшують витрати.
• Погіршення взаємодії з користувачем: Часті стани завантаження порушують користувацький потік і погіршують загальне враження.

Впровадження стратегії кешування даних є критично важливим для оптимізації застосунків React Suspense. Добре розроблений кеш може зберігати отримані дані та видавати їх безпосередньо з пам'яті під час наступних запитів, усуваючи необхідність у надлишкових мережевих викликах.

Реалізація базового кешу за допомогою React Suspense

Створимо простий механізм кешування, який інтегрується з React Suspense. Ми будемо використовувати JavaScript Map для зберігання кешованих даних та кастомну `wrapPromise` функцію для обробки асинхронного отримання даних.

1. Функція `wrapPromise`

Ця функція приймає проміс (результат вашої операції отримання даних) і повертає об'єкт з методом `read()`. Метод `read()` або повертає вирішені дані, або викидає проміс, якщо він ще очікує, або викидає помилку, якщо проміс відхилено. Це є основним механізмом, який дозволяє Suspense працювати з асинхронними даними.

            function wrapPromise(promise) {
 let status = 'pending';
 let result;
 let suspender = promise.then(
 r => {
 status = 'success';
 result = r;
 },
 e => {
 status = 'error';
 result = e;
 }
 );

 return {
 read() {
 if (status === 'pending') {
 throw suspender;
 } else if (status === 'error') {
 throw result;
 } else if (status === 'success') {
 return result;
 }
 },
 };
}

            

              
                Copy
              
            
          

2. Об'єкт кешу

Цей об'єкт зберігає отримані дані за допомогою JavaScript Map. Він також надає функцію `load`, яка отримує дані (якщо їх ще немає в кеші) і обгортає їх функцією `wrapPromise`.

            function createCache() {
 let cache = new Map();

 return {
 load(key, promise) {
 if (!cache.has(key)) {
 cache.set(key, wrapPromise(promise()));
 }
 return cache.get(key);
 },
 };
}

            

              
                Copy
              
            
          

3. Інтеграція з компонентом React

Тепер використаємо наш кеш у компоненті React. Ми створимо компонент `Profile`, який отримуватиме дані користувача за допомогою функції `load`.

            import React, { Suspense, useRef } from 'react';

const dataCache = createCache();

function fetchUserData(userId) {
 return fetch(`https://api.example.com/users/${userId}`)
 .then(response => {
 if (!response.ok) {
 throw new Error(`HTTP error! Status: ${response.status}`);
 }
 return response.json();
 });
}

function ProfileDetails({ userId }) {
 const userData = dataCache.load(userId, () => fetchUserData(userId));
 const user = userData.read();

 return (
 

 
{user.name}
 
Email: {user.email}
 
Location: {user.location}
 
 );
}

function Profile({ userId }) {
 return (
 Loading profile...