2-2. NextJS та справжні клієнтські компоненти
HTML-код
- Опубликовано: 12 фев 2024
- Чи існують в Next.JS справжні клієнтьскі компоненти - тобто такі, які рендеряться виключно на клієнті і ніколи не рендеряться на сервері? Про це ви дізнаєтесь з цього маленького відео про Клієнтські компоненти та Next.JS
💻 Програма та матеріали - github.com/Drag13/NextJS-expr...
🧑💻Код github.com/Drag13/NextJS-expr...
💌 Telegram - t.me/reactbeginners
![2-3. [Практика] NextJs, компоненти та їх види](http://i.ytimg.com/vi/wEz-lknzEKk/mqdefault.jpg)
![3-2. [Практика] Next.JS та стилізація](http://i.ytimg.com/vi/NFVKhx0pVLY/mqdefault.jpg)
А яка різниця буде якщо зробити просто імпорт компоненти з директивою use client(без dynamic)? Хіба щось зміниться?
Звичайно, ще й як. Use client компоненти рендеряться і на клієнті і на сервері. Саме тому, у попередньому відео, я назвав їх універсальними. А комбінація ssr false та use client змушує їх рендерятится вже виключно на клієнті
А які юз кейс чисто клієнтських? Для чого так робити?
Для компонентів які неможливо або не варто рендерити на сервері:
Неможливо: будь яка стороння ліба що звертається до dom api напряму
Не варто: canvas
Чи має значення що краще застосовувати для опису компонентів - arrow functions або function declaration?
У arrow function немає властивості name (це ж анонімна функція), в стек трейсі виглядає крапельку менш зручно. В усьому іншому справа смаку
+++
Мабуть можна в налаштуваннях компіляції якийсь прапорець поставити, щоб відключити ssr та отримати звичайний single page application. Щоб для кожного компонента такий динамічний імпорт не прописувати
Та воно для кожного і не потрібно. Ми живемо із серверними. Трохи додає складності але жити поки можна. А якщо вимкнути ssr, то next взагалі стає не потрібним. Можна брати звичайний Vite
@@reactdev маєте на увазі, що якщо ти взяв next (що є по суті фулстеком), то по дефолту і бажано щоб у тебе було ssr: true, бо якщо у компонентах робити все false, то для чого тоді next..
Саме так. Одна з дуже великих переваг next це ssr який працює одразу з коробки.
@@reactdev дякую)
Чому next одразу не зробив нормальні компонети, які б рендерилися тільки на клієнті? Навіщо ці танці з бубнами? )) не зрозуміло.
Дякую за урок! Формат з короткими відео - бомба! )
А от на це у мене вже є відповідь і вона проста. Тому що сучасний некст не націлений на інтерактивність)
@@reactdev тобто, якщо мені потрібний досить інтерактивний сайт, то я маю використовувати постійно отакі приспособи або просто не обирати некст?
Якщо вам не потрібне (і не буде потрібне) SEO я б некст не брав. Сервер, якщо він потрібен, можна розмістити окремо.
Але і з некстом можна жити. Маємо зараз адмінку на останньому нексті, трохи боляче, але терпимо. Обходимось без ssr false
@@reactdev дуже цікаво та по справі зроблене відео, дякую!
не націлений на інтерактивність… в мене виникає питання на поговорити:
От як приклад - компонент Loader, який має показуватись до завантаження сторінки. Якщо його імпортувати таким чином, то він взагалі завантажуватись не буде до componentDidMount… тому іноді статично згенеровані компоненти, то навпаки більше інтерактивності? І ось як приклад, весь згенерований джаваскріпт, який фетчить та оновлює дані на сторінці - чим це не інтерактивність? І чим сторінка, яка чекає поки браузер відрендерить всі компоненти інтерактивніша, за статичну?
Питаю і розумію, що не розумію і починаю розуміти 😊
Дуже вчасне відео для мене. Тільки вчора думала про SPA/MPA
@@reactdevі що болить в адмінці?
а якщо додати в клієнтський компонент import "client-only", ефект буде той самий?
Це та що стороння бібліотека?
я не знаю, посилання та рекомендації щодо пакетів server-only та client-only я бачив в офіційних доках, npmjs майже ніякої інформації не дає. я не впевненний, що вони сторонні. це якщо стороння=third-party
Теж бачив тільки в документації