React & Next.js Vocabulary: 35 Terms Every Frontend Developer Needs (англійською)

React домінує в ландшафті фронтенду, і Next.js став основним фреймворком для виробничих додатків React. Незалежно від того, чи ви приєднуєтесь до нової команди, читаєте PR- матеріал або задайте питання під час інтерв’ ю з технічним фахівцем, знання цього словника допоможе вам спілкуватися з впевненістю. Цей посібник містить 35 основних термінів, починаючи з основ до епохи App Router.

---

Основні концепції

Component

** компонент ** — це частина інтерфейсу користувача, яка може використовуватися повторно. У React все є компонентом — кнопка, форма, вся сторінка. Компоненти приймають вхідні дані і повертають JSX (синтаксис, схожий на HTML, використовується React).

“Чи можна витягнути цю логіку в окремий компонент? Це стає трохи довше» «Компонент UserCard використовується в трьох місцях — переконайтеся, що ваша зміна не порушує інших»

Props

** Властивості ** (короткий варіант назви * властивості *) — це вхідні дані, які ви передаєте компоненту. Вони передаються від батька до сина і не можуть бути змінені компонентом, який їх отримує.

«Компонент не відображається правильно — перевірте, які реквізити ви передаєте йому» «Ми передаємо userId як реквізит, щоб компонент міг отримати правильні дані.»

State

** Стан ** — це дані, якими компонент керує внутрішньо. Коли стан змінюється, React перевідтворює компонент. Найбільш поширений спосіб оголошення стану — з гачком useState.

«Впадаюче меню контролюється — воно зберігає свій відкритий/закритий стан локально» «Пересунути цей стан до батька, якщо обидва компоненти мають його прочитати»

Hook

Hook це спеціальна функція, яка дозволяє використовувати властивості React — такі як стан і життєвий цикл — всередині функціональних компонентів. Гаки завжди починаються з use. Найбільш поширені: useState, useEffect, useContext, useRef, useMemo, і useCallback.

«Ви не можете викликати гачок всередині петлі — це проти правил гачків.» «Ми написали нетиповий гачок для інкапсулювання логіки пошуку.»

useState

** useState ** — це гачок для оголошення локального стану. Повертає поточне значення і функцію вказівника.

«Я використовую useState для відстеження того, чи відкритий модаль»

useEffect

** useEffect ** виконує побічні ефекти — отримання даних, підписок або маніпуляції з DOM — після відтворення. Масив залежностей керує тим, коли програма буде виконана знову.

«Нескінченний цикл викликається відсутністю залежності в вашому useEffect.» «Ми отримуємо дані користувача в useEffect, коли компонент монтується»

Context

** Контекст ** надає вам змогу спільно використовувати значення у дереві компонентів без передачі реквізитів на кожному рівні. Цей пункт буде корисним для таких речей, як поточний користувач, тема або локаль.

«Ми використовуємо контекст для передачі автентифікованого користувача до глибоко вкладених компонентів.» Не ставте все в контекст — це викликає непотрібні пере-рендери»

Memoisation

Memoisation (англійська правопис: memoisation) це техніка кешування обчисленого значення, щоб React пропускав повторне виконання дорогих обчислень. useMemo memoises значення; React.memo memoises цілий компонент.

«Wrap that filtered list in useMemo — it’s recalculating on every render.» (англійською) «Ми memo -ізували компонент рядка таблиці, тому що список має сотні елементів»

Межа помилки

** error boundary ** — це компонент класу React, який ловить помилки JavaScript у своєму дереві дочірніх компонентів і показує резервний інтерфейс користувача замість аварійного завершення всієї сторінки.

«Оберніть віджет в межах помилки, щоб аварія там не знищила всю панель управління.»

Легке завантаження

** Ліньове завантаження ** означає завантаження компонента або модуля лише у разі потреби, а не при початковому завантаженні сторінки. У React це робиться з React.lazy() і Suspense.

«Бібліотека діаграм важка — давайте завантажимо її ліниво, щоб вона не блокувала початкове відтворення»

Suspense

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

«Вовк з північного сходу» (1980) «Відкрийте двері і вирушайте в подорож» (1980) «Відкрийте двері і вирушайте в подорож

Реакція на запитання

** React Query ** (тепер TanStack Query) — це бібліотека для отримання, кешування і синхронізації стану сервера в React. Він автоматично обробляє стани завантаження/ помилок, отримання фонових даних і анульування кешу.

Ми замінили useEffect + useState шаблон отримання з React Query — він обробляє застарілі дані набагато краще «React Query’s invalidateQueries is great for refreshing data after a mutation.»

---

Next.js Core Concepts (англійською)

Сервер-сторінка (англ. Server-side rendering)

** SSR ** означає, що HTML- код сторінки буде створено на сервері під час кожного запиту. Користувач отримує повністю відтворену сторінку негайно, що добре для SEO і першої малювання.

«Страниця продукту використовує SSR, тому що ціна часто змінюється і нам потрібно, щоб вона була свіжою на кожному запиті»

Статична генерація сайтів (SSG)

** SSG ** означає, що сторінки попередньо відтворюються під час збирання. Вони надаються у вигляді статичного HTML — швидко і дешево для хостингу — але дані є лише такими ж свіжими, як і у останній збірці.

Блог є SSG — ми відновлюємо його, коли тільки з’являється новий пост

Регенерація (регенерація) (англ. Regenerative)

** ISR ** надає вам змогу оновити статичні сторінки * після * їх створення, без перебудови всього сайту. Ви встановили час revalidate; Next. js відновлює сторінку у фоновому режимі, якщо запит надійде після цього часу.

«Ми використовуємо ISR з 60-секундним перевіркою, тому домашня сторінка залишається свіжою без SSR overhead.»

Реакція на серверні компоненти (React Server Components)

** Реакція серверних компонентів ** виконуються виключно на сервері. Вони можуть безпосередньо отримувати доступ до баз даних і файлових систем, і вони не надсилають JavaScript клієнту, зменшуючи розмір пакета.

Використовуйте RSC для отримання даних — він ніколи не досягає браузера, тому пакет залишається малим “У App Router, компоненти є серверними компонентами за замовчуванням. Додати 'use client' тільки тоді, коли вам потрібна інтерактивність»

Hydration

Гідрація це процес, за якого React приймає статичний HTML, надісланий сервером, і додає слухачів подій JavaScript, щоб зробити його інтерактивним. Якщо HTML сервера не збігається з тим, що відтворює React на клієнті, ви отримаєте помилку гідрації.

«Ми отримуємо невідповідність гідрації — щось відображається по-різному на сервері і клієнті» «Компонент читає localStorage при монтуванні, що викликає помилку гідрації, тому що сервер не має до нього доступу»

Рут-Ельза

App Router є системою маршрутизації Next.js, представленою в Next.js 13. Він використовує каталог app/, підтримує React Server Components за замовчуванням, і вводить макети, завантажувальні стани і межі помилок як конвенції першого класу.

«Ви використовуєте Pages Router або App Router? Шаблони отримання даних досить різні.» У App Router, ви розташовуєте ваші loading.tsx і error.tsx поруч з вашим page.tsx

Дії сервера

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

«Замість того, щоб будувати маршрут /api/update-profile, я використовую дію сервера — це набагато чистіше»

Middleware

У Next.js, middleware це код, який виконується до того, як запит буде завершений. Він може перенаправляти, переписувати або змінювати запити і відповіді — зазвичай використовується для захисту автентифікації.

«Ми перевіряємо JWT-токен в середовищі і перенаправляємо неавтентифікованих користувачів на сторінку входу»

---

Архітектурні та естетичні аспекти

Bundle

** Bundle ** — це об’ єднаний файл JavaScript, який буде надіслано до переглядача. Невелика кількість є критичним для продуктивності. Next.js автоматично розділяє код вашого пакету за маршрутом.

«The bundle is too large — check if you’re importing the full lodash instead of individual functions.» (англійською)

Розділення коду

** Розділення коду ** означає розбиття пакунка на менші частини, які завантажуються за потреби, отже переглядач звантажує лише те, що потрібно для поточної сторінки.

«Next.js робить розділення коду на основі маршруту автоматично, але ви можете зробити це всередині сторінки з динамічним імпортом також.»

Динамічний імпорт

** динамічна імпортація ** ( import() ) завантажує модуль асинхронно, під час виконання, а не під час збирання. Це механізм, що стоїть за розділенням коду і лінивим завантаженням.

«Динамічний імпорт компонента карти — немає сенсу завантажувати його, якщо користувач не відкриває вкладку «Місце».»

Revalidation

** Повторна перевірка ** — це процес оновлення кешованих даних. У Маршрутизаторі програм ви можете скористатися командами revalidatePath або revalidateTag з дій сервера, щоб очистити кеш від певних даних.

«Викликати revalidatePath('/products') після мутації, щоб список відразу показував новий елемент»

---

Як використовувати цю функцію в прикладі

Знать условия - это только половина победы. Ось деякі з реальних шаблонів, які ви почуєте і використаєте:

** В перегляді коду: **

«Цей гачок має відсутню залежність — додайте userId до масиву залежностей useEffect» “Чи можемо ми перенести отримання даних на RSC? Немає ніяких причин для того, щоб він працював на клієнті»

** В планах: **

“Ця сторінка повинна бути SSG або SSR? Дані змінюються кожні кілька годин, тому ISR з коротким вікном перевірки може бути правильним викликом»

** Під час зневадження: **

“Я бачу помилку в гідраціі. Сервер і клієнт відтворюють різний вміст — ймовірно, щось робити з window доступом»

В стойке:

«Я працюю над вилученням логіки аутентифікації в нетиповий гачок, щоб ми могли повторно використовувати його в компонентах»

Вміння користуватися цим словником допоможе вам повноцінно брати участь у обговореннях щодо інтерфейсу — від прийняття рішень щодо архітектури до перегляду PR і сеансів зневадження під час дзвінків.