Релиз NextJS 14 и Server actions

С выходом NextJS 14-й версии концепт Server actions признан стабильным. Разбираемся, что это такое и как использовать.
Тайм-коды:
00:00 Анонс темы
00:20 Документация и пререквизит
01:37 Создание постов с Server action
06:26 Разное поведение по завершению мутации
10:53 Удаление с Server action
13:47 Редактирование с Server action
17:06 Итоги
Код из видео github.com/michey85/next-blog...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@NIKOLAEVRR3RUS]

Больше контента! Спасибо за свежатину)

[@DevAr4y]

спасибо, доходчиво и понятно.

[@user-gi8pn8or7l]

ура наконец то дождался next)) пожалуйста, сделайте более продвинутый урок по авторизации в next. например как сделать вход по почте + паролю, как сделать регистрацию, очень интересна работа с токенами (если у меня сервер возвращает два токена jwt). как сделать вход по google кнопке и при этом сохранить токены итд

[@hacktau]

next auth в помощь

[@Den-yg4wz]

@@hacktau а как там все кастомизировать? чтобы не на аглицком аутентификация была. Много вопросов. Будем благодарны за обстоятельный обзор этого инструмента и как его реально использовать на проде.

[@hacktau]

@@Den-yg4wz через next-intl можно

[@angryprops]

Да, тоже очень интересна эта тема, видео было бы очень полезно

[@sour5786]

тоже интересна продвинутая работа с next-auth. жду

[@rustamakhmetyanov4404]

Люди, использующие next в больших проектах, говорят 13 версия принесла немало багов, и вообще она сыровата ещё, а тут выкатили 14 версию😅

[@prostojustme]

Да , есть такие баги. Но многих из них исправили в версии 13.5 )

[@pavelsmirnov9818]

Было бы здорово, если Михаил разобрал тему FSD, если был опыт работы с этой методологией. Тезисный обзор сущностей дополненный мыслями на основании из своего опыта (опять таки, если он есть)

[@omg-go4vf]

Спасибо добрая душа

[@sabrenda]

Михаил, добрый день! а можете выпустить видео с работой User-agent для определения устройств) так как на next js в проектах SSR и CSR часто используется вместе это вызываем проблемы, потратил день чтобы решить проблему с этим, ну и работу с svg тоже интересно показать) и конечно же спасибо за годный контент!)

[@user-dy5sv1gx4v]

красавчик

[@Den-yg4wz]

🔥🔥🔥Михаил спасибо за ратные труды! 🙏🙏🙏 Подскажите по секрету, как вы сделали такую красивую цветную консольку? Будем благодарны! ) ♥

[@mishanep]

Я использую iTerm терминал. Там много любопытных фишек.

[@stasprykhodko938]

Добрый день, Михаил. Во всех видео о server action разбор идет в ключе работы с формой. Где еще может и должен применяться server action? Server action функция всегда содержит директиву 'use sever', хотя во всех разборах данная функция и так находится в серверном компоненте - это такой синтаксис и может ли Server action располагаться внутри "use client" компонента/страницы?

[@HEX_CAT]

❤🎉

[@pulsarbitw5335]

Михаил, здравствуйте! В процессе изучения next.js столкнулся с проблемой. global-error.jsx (error компонент ) НЕ перехватывает ошибки в корневом layout'e. В документации написано, что для перехвата ошибки в корневом layout'e необходимо использовать global-error.jsx, НО он этого не делает. Пытался найти решение и постоянно натыкаюсь на наличие проблемы, но без ее решения. (P.S. заметки: в корневом layout'e делаю обычный throw new error("...") для проверки работы global-error, а в global-error.jsx - стандартный return ( ...), global-error лежит на верхнем уровне app - где и должен; версия next.js - 14.0.2 )

[@boycovclub]

Это называется возвращение в 2000-е когда был пхп)

[@alexvoid8717]

Server Actions are not limited to and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like .

[@Taiga_libertarian]

оу май год 😱😱😱😱 опять?

[@SaDaMaZaHaKa]

Михаил доброго вам времени суток, наверное пишу свой первый комментарий, но не могу сказать что вы прекрасно преподносите материал, но смотря это видео и читаю документацию оф по Server Actions возник вопрос, надеюсь вы на него ответите. Я думал что вся суть Server Actions это в том что она позволяет нам управлять формой на серверной компоненте и плюс к этому если в браузере не загрузиться js может из за медленного интернета, форма будет все равно работать что говорит про оптимизацию некую. Но читаю статью в документации они используют такое новые хуки по управлению формы как useFormState, useFormStatus, useOptimistic. Как вы по итогу думаете в чем суть теперь Server Actions если у нас клиентские компоненты судя по документации.

[@mishanep]

Суть server actions в мутации данных. А конкретно - как альтернатива REST API точкам. Касаемо новых хуков - это уже новшества react и react-dom, идущие как экспериментальные и пока не доступные в стабильных релизах. Плюс, на официальной документации реакта по хуку useFormStatus нет ни слова о NextJS. Примеры в официальной доке выглядят любопытно, но пока не было релиза этих хуков, говорить о них рано.

[@wolfern5449]

Добрый день, может кто-нибудь обьяснит почему если я создаю action внутри page.tsx мне надо явно прописывать что это use server, разве страницы это не априори серверные компоненты, если вопрос глупый заранее извеняюсь, первую неделю разбераюсь с Next js

[@evgenstepanov6319]

С bind конечно на костыль скорее похоже)

[@dmitryreturn1443]

как раз столкнулся с проблемой обновления серверного компонента с помощью форм экшен...посмотрим смогу ли разобраться с помощью этого видео

[@Alexander_1ov]

Очень доходчиво и понятно. Спасибо за видео. А в чем преимущество использовании форм в серверных компонентах в отличии от клиентских? Просто чтобы нагрузку с клиента перенести на сервер?

[@mishanep]

Меньше JS на клиенте - быстрее загрузка страницы. Но тут зависит от требований. Когда нужна сложная валидация на клиенте, то без JS всё равно не обойтись. Но есть и немало сценариев, когда достаточно серверной части. Исторически это были form action, так что это возвращение к истокам.

[@Alexander_1ov]

@@mishanep спасибо за ответ)

[@pulsarbitw5335]

Привет, Михаил. Вопрос не по теме видео, но все же. Хотелось бы узнать насколько важно понимание работы createEntityAdapter в RTK, нужно ли разбирать эту тему в документации подробно или хватит поверхностного ознакомления? А так же как часто вы встречали createEntityAdapter на своей практике?

[@mishanep]

Я считаю это самый недооцененный функционал в редаксе, по крайней мере в проектах, что мне доводилось участвовать. Последние полгода я редаксом не пользуюсь по работе. Но в целом, чем лучше вы ознакомитесь с этой фичей, тем больше выгоды сможете выжать из нее.

[@pulsarbitw5335]

спасибо @@mishanep

[@alexanderbaltsevich9270]

Здравствуйте Михаил :) Спасибо за труды! Пытаюсь переварить Server Actions. И не могу понять, какую выгоду мы получили в рамках вашего видео от Server Actions. По факту мы переложили запрос с клиента на сервер, а какой профит от этого? Ведь точно так же могли и с клиента сделать запрос. Буду благодарен ответу :)

[@mishanep]

В серверных экшнах может быть прямой запрос к базе данных, чего на фронте мы сделать не можем.

[@alexanderbaltsevich9270]

@@mishanep А есть в этом какая то ценность? Как работает бэкэнд в реальности. Там еще целая череда мидлваров и разных проверок прежде чем, хоть что то добавить в базу данных. Та же регистрация, которая проверяет целостность данных, потом проверяет наличие пользователя в базе. Создает токены и т.д.. Не будем же мы все это писать в серверных экшенах. И тоже самое нам нужно и для логина и для большинства других экшенов.

[@mishanep]

Здесь вопрос выбора архитектуры. Next может быть как полноценным бэкендом, и тогда да - так или иначе какие-то проверки внутри экшнов понадобятся. Либо это прослойка до бэкенда. На моей работе используется именно как прослойка, а бэк на Java.

[@hotmetallic]

Если action серверный,то как почистить форму на клиенте после submit-а?

[@un_defined]

он умеет вернуть результат работы, после получения - сбросить

[@user-ki4eu5wi1b]

Очень хорошее видео. Ноя у меня пару багов, открыл ваш гит и тоже вроде пару багов если открыть сайт. когда создашь посты к примеру пост 5 пост 6 пост 7 , потом удаляешь их, а потом опять создаешь с другим контентом то все равно кидает тебя на уже созданные пост 5 пост 6 и пост 7 , несмотря на то что тайтл и контент другой. И потом вовсе их удалить нельзя. Или это я чего-то не понимаю

[@mishanep]

Там могут быть нюансы с кэшированием. По-хорошему, БД должна создавать каждый раз уникальный id. В моем примере используется моковый бэкенд, поэтому он может местами криво работать.

[@user-ki4eu5wi1b]

спасибо)@@mishanep

[@__a8as]

Используй доверенные методы с пхп к черту некст он всегда лагает и багов куча когда просыпаешься уже поздно ибо продакшн и бабки миллиардовые

[@user-xg2ro4ic2m]

Странно... Почему-то отправляет вовсе не в json не смотря на stringify...

[@biLLie_wiLLie]

а в чем заключается здесь проблема с безопасностью?

[@mishanep]

Там речь о том, что когда начинаешь миксовать концепрты фронта и бэка, есть риск нечаянно сенситивные данные отправить в разметку. Next уже даже придумал концепт как предотвратить это, назвав его taint, но он пока в Альфе. У них в блоге большая статья на тему безопасности.

[@jonyonee]

Как отключить роутер кэш на клиенте в next 14?

[@mishanep]

Полагаю, здесь не должно быть отличия с 13-й версией. Встроенный fetch имеет опциональный третий параметр, который управляет кэшированием. Где-то я об этом на канале рассказывал в цикле по нексту.

[@jonyonee]

@@mishanep Я не про кэш запросов и данных. Я про роутинг некста его кэш.

[@Sergey_Klimov]

Редирект работает только потому, что компонент формы является северным. Попробуйте сделать этот компонент клиентским и никакой редирект не сработает а будет выбрасывать ошибку. Я например хочу сделать валидацию формы на стороне клиента, потому она у меня клиентская и получается, что серверные экшны являются просто бесполезными если они только и могут, что выбрасывать ошибки

[@mishanep]

Здесь можно по-разному подойти к решению этого вопроса. Первое, что приходит в голову вложить в форму (серверный компонент) клиентские компоненты с инпутами, и валидировать их по мере заполнения (или потери фокуса). Та же кнопка отправки формы может быть неактивна до тех пор пока поля не заполнены корректно.

[@Sergey_Klimov]

@@mishanep и получается, что всякие библиотеки по типу react-hook-form теряют свой смысл. Я не могу представить себе как я буду связывать такие инпуты как "пароль" и "повторение пароля" друг с другом. Как кнопка будет знать о состояниях инпутов, если она является отдельным клиентским компонентом. Все настолько туманно. Какой то общий стор делать для них что-ли)

[@admall5596]

Во, уже можно выпиливать experimental: { serverActions: true, }, Еще в то время успел распробовать и уж очень зашло...

[@paqstd-yt]

Разработчики next.js изобрели php

[@abbze8272]

Вообще лютую эко-систему наворотили. Скоро в angular превратят))

[@ogg_gang]

не видел твой коммент, то же самое написал. ахах обидно как-то, убили все основные концепции реакта, теперь его можно не учить. JSX знаешь и вперёд

[@ogg_gang]

становится похоже на php, в котором мы серв и фронт пишем в одном файле. как-то грустно... а куда же денутся хуки? по сути реакт там и не нужен, нужен только jsx

[@user-lk4mb3nw3d]

Простите меня конечно, но нет ощущение что это дичь какая то , нагородили какой то хрени ребята в Next )

[@leonidserafimovich4844]

Ребят, подскажите, как сделать авторизацию через openID на мой одностроничник, я уже голову сломал...

[@dimzinnatov7242]

Есть уже готовая реализация для openid connect на js и типизированный вариант