React Server Actions туторіал. Клієнтська та серверна валідації. Next.js 14 tutorial

Зараз на ДОУ проходить зарплатне опитування, хто працює - знайдіть можливість заповнити анкетку dou.ua/goto/jGT7
В даному відео розбираємось з React Server Actions - новим способом мутації даних на сервері який викликається на дії користувача на клієнті. Все як і було раніше, але тепер нам не потрібно явно створювати API та описувати контракт.
Враження від даної технології в мене неоднозначні - більш негативні.
Підписатися на UA-cam канал React для початківців - / @reactdev . На ньому знайдете два курси про React, React Code Smells, Next.JS та загальні відео про розробку
Telegram канал t.me/reactbeginners - Корисна текстова інформація для початківців про React та розробку в цілому, без реклами та копіпасти.
Посилання на GitHub - github.com/MaksymRudnyi/react...
Збір на комплектуючі дла FPV send.monobank.ua/jar/4bswcvxgTZ
00:00 Server Actions вступ
00:40 Що таке Server Actions?
02:20 Джерела інформації
03:19 Що будемо робити
05:54 Код на GitHub
06:27 Що нам дають Server Actions
09:29 Як створювати Server Actions
12:04 Канал Віталія Рубана - React для початківців
14:49 Як раніше мутували дані на сервері
18:09 Початковий код
22:28 Перший Server Action
31:56 Дізейблим Submit кнопку
37:13 Додаємо серверну валідацію
37:28 Виклик Server Action з client component
39:07 useFormState
44:41 Zod
53:28 Показуємо помилки валідації
56:26 Додаємо клієнтську валідацію
59:38 Schemas file
01:03:40 Валідація email на унікальність
01:12:10 Очищення форми
01:16:50 Найбільший мінус Server Actions
Стати спонсором каналу:
/ @maksymrudnyi
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
BuyMeACoffee - www.buymeacoffee.com/maksymru...
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ / travelscode
#react #nextjs #serverActions #javascript #nextjs14

[@MaksymRudnyi]

Підписатися на UA-cam канал React для початківців - www.youtube.com/@reactdev. На ньому знайдете два курси про React, React Code Smells, Next.JS та загальні відео про розробку. Telegram канал t.me/reactbeginners - Корисна текстова інформація для початківців про React та розробку в цілому, без реклами та копіпасти.

[@amelianceskymusic]

22:28 - яке полегшення стало, коли шум пропав=))))

[@doomor]

Як завжди дякую за цікавий конттентт. А zod - рекомендую, дуже крута ліба, використовуємо на робочому проекті, якщо в ньому розібратися (а він не складний), то можна дуже зручні валідації та трансформації робити, коротше спрощує роботу з даними особливо в TS

[@amelianceskymusic]

28:30 - хіба react hook form не працює? у мене наче працювало

[@amelianceskymusic]

32:25 - а якщо огорнути createUser в startTransition із const [isPending, startTransition] = useTransition(); і isPending поставити передати як пропс disabled в кнопку?

[@alexeyzhabin]

можна використовувати Server Actions як layer між стороннім API та апкою, та покласти в них якусь додаткову логіку. До того ж зі сторони клієнта не побачити де знаходиться API бо усі запити йдуть вже з сервера

[@alexturikua]

Респект автору за контент українською мовою❤🇺🇦.
Нажаль об'єктивно , початківцям дуже бажано таких відео не дивитися😢... бо формується зовсім не правильне уявлення про технологію.
Автору хочу такий месседж залишити для роздумів і лише з метою допомогти 🤷: "ну якщо вже позиціонування каналу відбувається як "навчальний контент", так треба же , як мінімум перед тим як публікувати навчальний контент, самому розібратися, або ж не робити взагалі 'дуже погані перезкази документації' 😢".
Так, технологія нова, мало кому зрозуміла навіть на рівні "розуміння в теорії що воно і куду його" , не кажучи вже про "куди ж в дикий природі використати".
Мій досвід знайомства з технологію надзвичайно позитивний , і вже деякі фінальні випробування залишаються перед тим , як прикручу на один з бойових проектів, і в результаті чого, вже бачу які плюшки отримаю 100%.
🇺🇦🤷

[@MaksymRudnyi]

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