Англійська для компонентів кешу Next.js

Компоненти кешування змінили те, як команди Next.js говорять про продуктивність. Замість того, щоб обговорювати режими відтворення на рівні сторінки, інженери тепер обговорюють, які компоненти кешуються, на який час і за яких умов — для цього потрібні більш точні слова, ніж « це просто повільно » або « це слід кешувати ». Цей підручник містить інформацію англійською мовою, яка потрібна вам для того, щоб чітко пояснити рішення щодо кешування під час перегляду коду, обговорення каналів подій і обговорення архітектури.

Ключовий словник

** use cache директива** — директива на рівні функції або файла, яка позначає компонент або функцію як кешовану, вказуючи фреймворку зберігати її вивід і використовувати його знову у запитах до тих пір, поки не буде анульовано. “Ми додали директиву use cache до компонента списку продуктів, оскільки дані змінюються лише кілька разів на день.”

** Профіль кешу ** — назване налаштування ( cacheLife ), яке визначає, як довго кешований вивід залишатиметься свіжим і як довго його можна буде обслуговувати як застарілий під час перевірки. “Давайте використаємо тут профіль кешу hours замість days — ці дані оновлюватимуться частіше, ніж типово передбачається.”

** Часткове попереднє відтворення (PPR) ** — стратегія відтворення, за якої статичну оболонку буде показано миттєво, а динамічні частини сторінки буде показано пізніше, поєднуючи швидкість статичного створення з гнучкістю динамічного відтворення.

• “При частковому попередньому відтворенні оболонка сторінки завантажується миттєво, а поток персоналізованих рекомендацій — за секунду.” *

** Повторне перевірення ** — процес оновлення кешованих даних, або за певним інтервалом часу ( cacheLife ), або за запитом ( revalidateTag, revalidatePath ).

• “Викликати вручну перевірку після запуску webhook CMS, щоб кеш не чекав наступного запланованого оновлення.” *

** Мітка кешу ** — це мітка, яка додається до кешованих даних і надає вам змогу усунути пов’ язані записи кешу разом, замість того, щоб очищати весь кеш.

• “Позначте кешовану відповідь ідентифікатором продукту, щоб ми могли скасувати дію лише цього елемента, коли його ціна зміниться.” *

** Застаріла- під час- перевірки ** — шаблон кешування, за яким застаріла кешована відповідь буде негайно надіслано, а свіжу версію буде отримано у фоновому режимі для наступного запиту. “Навіть під час перевірки застарілої інформації користувачі іноді бачать дещо застарілий облік запасів — це очікувана поведінка, а не помилка.”

** Динамічний прогал ** — неформальний термін для частини частково попередньо відтвореної сторінки, яка не кешується і має відтворюватися за запитом, наприклад, персоналізований або вміст у реальному часі. “Сумарна вартість кошика є динамічним проміжком у статичній сторінці — її не можна кешувати, оскільки вона залежить від користувача, який увійшов до системи.”

Звичайні фрази

• Чи цей компонент загорнутий в use cache, чи він все ще динамічно відтворюється на кожному запиті?
• Профіль кешування занадто агресивний тут — ми обслуговуємо дані про ціни п’ятихвилинного віку
• «Давайте позначимо цей запис кешу, щоб ми могли анульувати його точно, замість того, щоб очищати все»
• «Ця регресія не була кешуванням баги — вона відсутня після перевірки після мутації»
• Чи можемо ми підтвердити, що це дійсно вдаряє по кешу, або це повертається до динамічного відтворення безшумно?»
• «Оболонка відображається миттєво завдяки PPR, але динамічний отвір все ще потребує свого власного завантажувального стану»

Приклади висловлювань

Пояснення рішення щодо кешування у перегляді проекту: “Ми застосовуємо use cache до компонента сторінки категорії з профілем кешу, заснованого на годинах, оскільки зміни запасів є досить рідкісними, що коротке вікно застарівання є прийнятним компромісом для збільшення продуктивності.”

Звітування про ваду кешування:

• “Після останнього розгортання віджет ціноутворення надає застарілі дані навіть після оновлення продукту. Схоже, що мутація не викликає revalidateTag, тому запис кешу ніколи не анульується.»*

Обговорення компромісів з менеджером продукту: “Ми можемо завантажити цю сторінку майже миттєво за допомогою часткового попереднього відтворення, але персоналізований банер завжди буде динамічним отвором — немає можливості попередньо обчислити вміст, який залежить від сеансу користувача.”

Професійні поради

• Навмисно використовуйте “кешований” проти “динамічний” при описі компонента — нечітке змішування цих двох слів (« це щось на зразок кешування ») ускладнює зневадження.
• Під час повідомлення про ваду застарілих даних, вкажіть, чи є причиною проблеми відсутність тригера перевірки або надто довгий профіль кешу — вони потребують різних виправлень.
• Використовуйте « dynamic hole » неформально з вашою командою, але у документації краще використовувати більш точний « uncached dynamic segment. »
• Розрізняти ** перевірку на запит ** (засновану на мітках або шляху) від ** перевірки за часом **, коли пояснюється, чому дані було оновлено.

Практичні вправи

1. Поясніть у двох реченнях, чому сторінку, що використовує часткове попереднє відтворення, можна завантажити миттєво, навіть якщо частина її вмісту є персоналізованою.
2. Написати звіт про помилку у одному реченні з описом кешу, який ніколи не буде анульовано після оновлення вмісту.
3. Опишете вашими словами відмінність між профілем кешу і мітчем кешу для колеги, який не має досвіду роботи з Next. js.

На практиці: Навігація та співпраця

Погляньмо правді в очі – навіть з чітким розумінням концепцій кешування Next.js, ефективне спілкування про них англійською мовою в команді розробників є ключовим. Це не просто про знання таких термінів, як « кеш- профіль » або « часткове попереднє відтворення »; вам потрібно сформулювати свої міркування, запитати про пояснення і надати конструктивний зворотній зв’ язок, все це точною, професійною мовою. Це часто включає переклад технічних ідей на щось зрозуміле для колег, які можуть мати різні рівні досвіду або поза межами розробки фронт-енду.

Розглянемо такий сценарій: Ви переглядали запит на звантаження, у якому розробник реалізував новий профіль кешування для певного маршруту. Опис PR просто говорить: « Оновлено кеш- профіль для / api/ products. » Ваш коментар, який має на меті ясність і реалізацію, може виглядати приблизно так: « Дуже багато зусиль було вкладено в оптимізацію маршруту /api/products! Але чи можете ви роз’ яснити, * чому * було обрано саме цей профіль кешу? Зокрема, чи ми ставимо на перше місце швидкість гідрації для часто доступних списків продуктів, чи є занепокоєння щодо потенційних застарілих даних, враховуючи динамічну природу нашого каталогу продуктів? Додати коментар, у якому буде детально описано причини вибору — можливо, з посиланням на показники продуктивності, які ми обговорювали минулого тижня — це дійсно допоможе у майбутньому обслуговуванні і розумінні. ” Це демонструє, що ви не просто вказуєте на відсутність деталей, а активно намагаєтеся зрозуміти процес мислення розробника. Це також підступно заохочує їх документувати свої рішення, що є цінною практикою само по собі.

Інша поширена ситуація виникає під час розмов Slack. Припустимо, що член команди запитає: « Як ми можемо переконатися, що цей компонент не буде перевірено знову без потреби? » Доброю відповіддю буде: « Ми можемо скористатися * частковим попереднім відтворенням * для цього конкретного компонента — це дозволить нам оновити дані лише для змінених розділів, а не для всієї сторінки. Ви хочете переглянути параметри вашого профілю кешування, щоб переконатися, що ми використовуємо цю функцію і не навмисно викликаємо повне перевірку. ” Ця відповідь уникає жаргону, де це можливо, і зосереджується на практичних наслідках стратегії кешування. Вона також запрошує до подальшого обговорення, якщо член команди потребує більш детальних рекомендацій.

Нарешті, коли ви пишете описи PR, пам’ ятайте, щоб вони були короткими, але інформаційними. Замість того, щоб сказати « Впроваджено кешування », ви можете написати: « Впроваджено нове cacheProfile для /api/products, налаштовано за допомогою « studio » для оптимізації швидкодії гідрування і зменшення небажаної повторної перевірки на основі початкового аналізу даних. » Такий рівень деталізації демонструє професіоналізм і сприяє загальній підтримці коду.

Ось приклад, який показує, як налаштувати простий профіль кешу за допомогою бібліотеки next-compose:

npx next-compose@2.1.0 create-next-app my-app --cacheProfile studio
cd my-app
npm install -D @types/next # Add TypeScript type definitions for Next.js if you're using TypeScript