Next.js меняет подход к кэшированию данных, и это создает как возможности, так и проблемы для разработчиков. Многие сталкиваются с тем, что кэшируемая информация может оставаться устаревшей, например, когда пользователь обновляет адрес компании, но отображается старый адрес на панели управления. Это может создать впечатление, что кнопка "Сохранить" не работает.
Проблема агрессивного кэширования в Next.js
При переходе на роутер Next.js разработчики часто замечают, что фреймворк кэширует эти очень агрессивно, что не всегда удобно для пользователя. Например, в традиционных одностраничных приложениях (SPA) эти загружаются заново почти каждый раз. Однако в Next.js запросы на получение этих кэшируются на сервере по умолчанию, что может привести к несоответствиям в информации.
Решение: динамическая валидация с помощью кэш-тегов
Вместо отключения кэширования, что нарушает высокую производительность SSR, оптимальное решение заключается в использовании точной управления кэшем. Next.js позволяет тегировать конкретные запросы. При изменении данных, например, при обновлении профиля, серверу можно просто указывать удалить только этот конкретный тег. При следующем запросе страница будет загружаться из кэша, но с актуальными данными для удаленного тега.
Пример кода для тегирования запроса:
export async function fetchTenantProfile(tenantId: string) {
const res = await fetch(`https://api.vashsite.com/tenants/${tenantId}`, {
next: { tags: [`tenant-profile-${tenantId}`] }
});
if (!res.ok) throw new Error('Не удалось получить профиль');
return res.json();
}Преимущества такой архитектуры
Использование кэш-тегов в Next.js позволяет добиться быстроты статических сайтов вместе с динамической актуальностью данных. Ваш сервер не обращается к базе этих при каждой загрузке страницы, что экономит ресурсы, а пользователи не сталкиваются с устаревшей информацией.
Практические выводы для разработчиков
Для разработчиков, работающих с B2B SaaS, важно эффективно использовать возможности кэширования в Next.js, чтобы улучшить пользовательский опыт. Изучите возможности тегирования кэша, чтобы ваше приложение выглядело мгновенным и синхронизированным с backend-состоянием. Создание архитектуры с четким управлением кэшированием — это путь к успеху.
В следующей версии Next.js, которую ожидают в 2024 году, стоит обратить внимание на улучшения в управлении состоянием кэша, что упростит жизнь разработчиков.