Фронтендеры поглощают бэкэнд! Больше никаких эндпоинтов!

Рет қаралды 12,576

Күн бұрын

React Server Actions намерен превратить большинство фронтенд разработчиков в фулстек! Ведь теперь бэкэнд будет распологаться настолько близко к React коду, что выделять это в отдельную профессию не имеет никакого смысла. Убедитесь в этом сами и приятного просмотра!
Ссылка на телеграмм канал
t.me/it_sin9k
Поддержать Айти Синяка можно здесь:
KZbin: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:36 Пишем первый серверный экшен
04:05 Пилим регистрацию
06:38 Варианты применения
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Пікірлер: 137

@kotifnat 5 ай бұрын

О да, как я люблю статус код 200 с полем status 'Bad request' и code 400 внутри. какой же кайф

@aquinary. 5 ай бұрын

Раньше: умеешь верстать? Отлично, ты принят В будущем: так, вот тебе задача, нужно создать социальную сеть, как в фейсбуке. Развени кластера, продумай всё, сделай так, чтобы оно могло ежесекундно обслуживать миллионы людей. Это твоё тестовое. Время тебе до послезавтра

@it-sin9k 5 ай бұрын

да) мне как то на тестовое попросили написать целый проект для аренды мотороллеров) чет я прифигел от этого))

@user-vt2mc9oq8y 3 ай бұрын

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

@DemetriyArh 5 ай бұрын

По моему это только удобство для прототипов. В целом, если бэк и фронт рядом, то такой агрегатор ускорит ответ. Вот только обычно, лучше завести такой агрегатор сразу на бэке. Получается агрегатор только для прототипов. И именно в ситуации когда заказчик сам не понимает чего хочет, и дизайн/логика компонента несколько раз меняются, такой быстрый способ собрать нужный запрос будет полезен. Прокси тоже вроде как уместен, но нельзя прокидывать заголовки, как в обычном route.ts крч. не выглядит как крутая фича. Фактически убирается несколько строк бойлерплейта лишая гибкости явного фетча. Но какбы фетчи и new Response и так в фабрики заворачиваются, не теряя их гибкости. т.ч. хз. реально только при создании демок, для ускорения понимания, какой интерфейс нужен в методе, который, всёравно, бэкэндщик будет делать на замену этим костылям.

@alexeyilin1527 5 ай бұрын

Выглядит всё это конечно не очень безопасно

@RomanDryndik 5 ай бұрын

Поздравляю, вы открыли RPC.

@FailValiev 5 ай бұрын

РПЦ?

@infantfrontender6131 5 ай бұрын

@@FailValiev, Remote Procedure Call (RPC)

@user-bs1ef6tt3e 5 ай бұрын

@@infantfrontender6131калл из процедур

@kulakofft4 5 ай бұрын

православненько)))))

@user-xs2dx2mh3f 5 ай бұрын

Слышал про ретёрн, ретурн, но ретарн впервые ))

@umidullo 5 ай бұрын

мне кажется или правая дорожка звучит громче?

@user-bo7fi2fg6w 5 ай бұрын

блин, я думал у меня наушники сломались)

@it-sin9k 5 ай бұрын

блин, а при записи я думал это у меня немного глючат наушники :(

@nan1000 5 ай бұрын

С телефона норм😅

@DevilAlex03 5 ай бұрын

Как вариант по работе с ошибками, можно вызывать exception в экшене через throw и на клиенте ловить с помощью ErrorBoundary компонента и это работает

@it-sin9k 5 ай бұрын

Спасибо! надо попробовать)

@arman-6172 5 ай бұрын

Кривые юзерские данные это не исключение 🤔. Хотя может на каких-то ЯП такое практикуют

@DevilAlex03 5 ай бұрын

@@arman-6172 я не про кривые данные, а именно про исключение на стороне серверного кода. Их можно поймать с помощью ErrorBoundary и отрисовать фаллбек. Как это работает? Некст присылает по http статус код 400 с стеком ошибки и упавшим оригинальным кодом. Вариант на самом деле не очень, супер не безопасно и работает странно, но такая возможность есть

@kulakofft4 5 ай бұрын

@@arman-6172 имеешь ввиду сервер должен отвечать 200 на кривые данные?

@arman-6172 5 ай бұрын

@@kulakofft4 нет, предлагаю исключения кидать и ловить на проблемы с кодом и инфраструктурой, а не то что юзер пароль криво написал. Тут инструмент валидации должен подключаться и сообщать, а не валить приложение. Да и чтоб провалидировать несколько полей сразу нужно будет буфер какой поднимать, а потом что и куда? Опять же могу ошибаться, но выглядит как злостный костыль 🤷‍♂️

@user-lk4mb3nw3d 5 ай бұрын

Для to do list пойдет )

@1revolman1 3 ай бұрын

Meteor, старина, ты вернулся немного в другом лице)

@alexlmaxl4966 5 ай бұрын

Логин и пароль передались в открытом виде через GET или POST запросом? И можно ли этим управлять? Спасибо заранее за ответ)))

@it-sin9k 5 ай бұрын

я бы сказал, что текущее решение на уровне обычного POST запроса, лучше все равно пока ничего не придумали. По поводу управлять, я таких опций не видел. Думаю пока их и нет. И не понятно понадобятся ли :)

@onet1589 5 ай бұрын

Ух, эта боль джавистов. Неужели через год другой останется только js 🥰

@it-sin9k 5 ай бұрын

да, хлеб потихоньку отбираем)

@user-xu9tb7oe2z 5 ай бұрын

а что на счет шифрования ? логин и пароль где-то в чистом виде летят на сервер?

@it-sin9k 5 ай бұрын

А как вы шифруете обычно логин пароль до отправки на сервер?

@user-xu9tb7oe2z 5 ай бұрын

@@it-sin9k да я затупил, ведь под капотом то всё тот же https запрос 🤭

@whi5k3y22 5 ай бұрын

Очень печально что это становиться новым камнем преткновения react-а. Хоть я и back c#, но скажи мне сейчас на собесе что проект на next, я бы как минимум денек подумал, а если бы был другой оффер с чистым react-ом, то скорее всего выбрал бы его. Очень сложно гонять один проект как front и back, как буд-то react теряет свою чистоту и аккуратность.

@dimitro.cardellini 5 ай бұрын

На великих проектах ніхто не буде бізнесову логіку реалізовувати на nextjs. І не react, і не nextjs не ставлять собі це за мету. Проте є нюанси з перформансом, коли окремий сервер для фетчінгу даних -- це зайва ланка на шляху контента. Або навпаки (коли є окремий сервер), є headless-CMS, креди до якої на фронт передавати не можна (з різних причин) -- то ж і створили цю монстру React Server Components -- але це все одно фронт-енд, просто з рендером на сервері. Щодо чистоти ... nextjs вже йде з транспайлером та бандлером, з самого початку йшов. То ж, в якомусь сенсі це давно вже не просто реакт, і не просто нода -- це реакт + нода + (умовно) вебпак. З іншого боку їх команда робить все, щоб сам код був якомога більше бізнес-орієнтованим (звісно в частині рендеру), і не мав великої кількості зав'язок, ні на реакт, ні на nextjs. Але на практиці, це стає занадто "магічним" особливо для початківців.

@user-gl3fo9vi2s 5 ай бұрын

@@TheSky5028для особо одаренных, снизу есть кнопка translate to Russian

@artem_bohak 5 ай бұрын

@@TheSky5028 лови репорт за расизм)

@Roger-qj4wu 5 ай бұрын

@@artem_bohakно ведь... Это же национализм...

@user-oj4pt3fj2m 5 ай бұрын

@@user-gl3fo9vi2s на пк нет

@sv3163 5 ай бұрын

3:49 return - это не ретАрн, а ретЁрн. А по-правильному вообще звучит как «ретёён» 🧐 Благодарю за видео 🤘

@SubaruImprezaEdet 4 ай бұрын

кто нибудь, откройте форточку

@joyStackk 5 ай бұрын

так я не уловил с этого экшена нельзязапрос базе данных отправить? если нет то это чуток бесполезняво

@it-sin9k 5 ай бұрын

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

@joyStackk 5 ай бұрын

@@it-sin9k имба тогда)

@user-xs2dx2mh3f 5 ай бұрын

Как думаете, в проде реально будут этим пользоваться?

@Svyatoslavik2 5 ай бұрын

Нет конечно

@it-sin9k 5 ай бұрын

ну все кто NextJS завезли себе в проект, те будут

@jonyonee 5 ай бұрын

Ну в некоторых случаях будет полезны server actions ну а так rest api бекенд будете жить долго думаю

@it-sin9k 5 ай бұрын

rest точно никуда не денется)

@couragic 5 ай бұрын

Может лучше сразу взять tRPC ?

@it-sin9k 5 ай бұрын

не знаком с такой абривиатурой о_О

@angelicoctahedron3646 5 ай бұрын

А может лучше fastify? В ней есть type-providers, принцип тот же как что в TRPC: пишешь схему валидации, из нее автоматом выводятся типы и openapi схема. А из openapi уже можно сгенерировать клиент для любого нужного тебе языка. Хотя в TRPC чуть меньше телодвижений будет. Но разница на самом деле не велика, в любом случае большую часть времени займет описание схемы валидации.

@couragic 5 ай бұрын

Так fastify - это полноценный веб сервер, там много лишнего и получается привязка к нему, а trpc - это только про типизацию взаимодействия и его можно интегрировать с любыми бэкенд/фронтенд фреймворками на nodejs/deno/etc.

@AlexanderBorshak 25 күн бұрын

Ем... А как другие клиенты будут пользоваться всем этим го... добром? Ну, к примеру, у нас есть 3-4 клиента - веб, iOS, Android, еще какой-нибудь Расбери Пай, плюс внешний сервис хочет интегрироваться с нами и юзать наш бекенд. С REST API все просто, а с React Server Actions как такое провернуть?

@it-sin9k 24 күн бұрын

не уверен, что понял вопрос. Пользоваться как? если через браузер открывать сайт, то какая разница, на любом устройстве откроет

@AlexanderBorshak 24 күн бұрын

@@it-sin9k Ну а если клиент - не браузер? Сервер, к примеру. Или ресолвер GraphQL. Или мобильное приложение, написанное на Kotlin, или Swift, или Dart? Или десктопное приложение, что по сети у нашего сервера данные получает? Ну и так далее...

@it-sin9k 23 күн бұрын

ааа я понял о чем вы. Конкретно эти же эндпоинты использовать точно нельзя. Но тут несколько моментов, под другие девайсы делают другой дизайн и ендпоинты все равно свои пилят. Поэтому может быть промежуточный бек позади nextJS, который все это сделает. Либо не пользоваться конкретно этой фичей и пользоваться только Server COmponents.

@AlexanderBorshak 23 күн бұрын

@@it-sin9k Просто удивляет настойчивость фейсбука, с которой они стараются "переизобрести" уже хорошо работающие вещи, по типу PHP или RPC, - но которые уже хорошо отлажены и могут использоваться в огромном количестве кейсов. Пока что получается так себе... Впрочем, возможно они решают какие-то свои локальные проблемы, просто результаты попадают в открытий доступ. Но они при этом не говорят об истинных причинах своих решений, и местами они выглядят странно.

@_renamed_ 5 ай бұрын

Поглощают от слова глотать.

@it-sin9k 5 ай бұрын

поправил) спасибо!)

@HEX_CAT 5 ай бұрын

❤❤❤🎉🎉🎉

@DemetriyArh 5 ай бұрын

звук только в правом канале

@it-sin9k 5 ай бұрын

Сорри за это, мой косяк)

@foldisnomistake Ай бұрын

а насколько это вообще все имеет смысл если использовать отдельный бэкенд с некстом для SSR, SSG и прочих его прелестей?

@it-sin9k Ай бұрын

не очень уловил суть вопроса

@foldisnomistake Ай бұрын

@@it-sin9k ну есть ли профит какой-то использовать некст с сервер экшенами если у тебя весь бэк отдельный и дб там же отдельно. Или тогда лучше просто делать CSR на реакте например.

@it-sin9k Ай бұрын

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

@qwezxc9758 5 ай бұрын

Какая боль по звуку, аудиодорожка только с голосом только в правое ухо идет. Но лайк за видео

@it-sin9k 5 ай бұрын

Спасибо! и сорри за звук) переустанавливал ПО и думал это у меня наушники сбоят) а оказалось ПО плохо настроил)

@user-nv6iw7bk1q 5 ай бұрын

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

@user-gw6df6ns7e 4 ай бұрын

Как прототип накидать или простой проект - штука нормальная. Потом надо выкинуть и сделать нормально.

@user-ik7rp8qz5g 5 ай бұрын

Для классической конфигурации фронт + бэк не обязательно делать два репозитория, по одному на каждое приложение. Монорепозитории как раз для таких задач и сделаны - все приложения в одном репозитории, зависимости устанавливать можно отдельно для каждого, запускать можно отдельно каждое, очень удобно. Единственный минус - огромные проекты с сотнями тысяч коммитов будут долго клонироваться в первый раз

@popuguytheparrot_ 5 ай бұрын

серверные экшены больше про progressive enhancement

@it-sin9k 5 ай бұрын

а это востребованая фича вообще progressive enhancement?

@infantfrontender6131 5 ай бұрын

@@it-sin9k, на уровне UX. Людей отключающих JS в браузере очень мало, но я не вижу каких либо проблем в том SA привносят progressive enhancement.

@user-ir1fj5jl4x 5 ай бұрын

С dts слышно синяка в правом ухе =)

@it-sin9k 5 ай бұрын

да) это косяк при записе) сори)

@markerok3411 5 ай бұрын

И до этого в нексте можно было написать бэк апишку. Только запрсы к ней делать нужно было через фетч. А сейчас просто сделали более красивое и понятное решение. Весь хейт в сторону некста это просто боязнь принимать новые правила и не чем не обоснован. Для создания маленьких проэктов некст стает просто ультимативным решением👍

@kirill-eremin 5 ай бұрын

И да и нет. Мы теперь должны знать как правильно готовить backend. Должны четко понимать какие части кода где выполняются (что выполняется на клиенте, а что выполняется на сервере); как покрывать сервер аналитикой, метриками и алертами; должны знать как решать проблемы при падении приложения; должны знать про потребление ресурсов нашим сервером и уметь оптимизировать; должны знать как обеспечить отказоустойчивость (как настроить и запустить несколько инстансов в нескольких ДЦ) и многое многое другое. И на каждом из этих этапов очень легко допустить ошибку, которая будет стоит компаниям денег. Раньше все это можно было делегировать backend-разработчикам (которые в этих темах давно и профессионально) и заниматься чисто фронтовой работой (ведь и чисто фронтовой работы очень-очень много и она бывает очень-очень сложная) Т.е. да, если заниматься простыми проектами, pet-проектами, или проектами с малой нагрузкой то все супер. Очень многих проблем просто не возникает. А разработка, видимо, становится более приятной и убодной. Но в серьезных проектах это все может и будет приводить к проблемам.

@infantfrontender6131 5 ай бұрын

@@kirill-eremin, это еще до SC и SA было. Поэтому ничего особо не изменилось. В крупных проектах SSR фреймворки вроде Next, Vite и SvelteKit были и будут как BFF. Бэкенд будет жить отдельно.

@golden_smiles 5 ай бұрын

Более понятное решение? "Ведь как оно работает, понять непросто" - цитата из видео. Весь хейт в сторону некста это просто люди уже словили кактусов на паре проектов. Не понимаю, почему и дальше это продолжают пропагандировать.

@123vitaha 5 ай бұрын

ретарн

@masserrackheim5358 5 ай бұрын

ретард

@ignatneko1339 5 ай бұрын

где тайпскрипт? умер?

@it-sin9k 5 ай бұрын

А что с ним не так?)

@ignatneko1339 5 ай бұрын

@@it-sin9k не используется в видео в примерах, значит и в работе не советуешь?)

@RealToptuK 5 ай бұрын

Изобрели php в javascript... Какой кошмар. 🤮🤮🤮 От чего бежали, туда и вернулись в итоге.

@DoktorZlo96 5 ай бұрын

а на php сразу делали клиент плюс сервер? (я просто не шарю)

@it-sin9k 5 ай бұрын

на пхп скорее делали сервер и + клиент) это имело чуть другие результаты)

@FailValiev 5 ай бұрын

Вордпресс

@vas_._sfer6157 5 ай бұрын

@@it-sin9k По сути это было бы вполне логичным развитием php, но Js к этому пришел раньше. Впрочем, думаю подобная технология вполне может быть пригодной на больших проектах. Было бы интересно, если бы это решение ещё сразо включала в себя ORM для работы с БД. При этом, безопасность вполне решаемая проблема. Единственное, из-за того, что так просто и "сладко" делать запросы на сервер люди будут злоупотреблять этим и реже кешировать результаты, из-за чего во время перерисовок будет куча запросов

@infantfrontender6131 5 ай бұрын

@@vas_._sfer6157, а зачем вам лочиться на ORM от Vercel? Есть множество решений вроде Prisma или Drizzle. У Prisma есть встроенные стратегии кэширования, но ничего не мешает вам реализовать свою или использовать стороннюю

@andreyrudin2286 5 ай бұрын

прошу прощения, но по моему глупость возвращать 400 ответ если у тебя что-то там не срослось и ты можешь вернуть нормальный 200 ответ. просто возвращаешь json error=0|1, result: {...} раз тут уже все инкапсулировали в виде вызова функции, тут вообще не должно быть 400 ошибки, это тут вообще не нужно

@it-sin9k 5 ай бұрын

протокол общения с серверными экшенами еще только зарождается) поэтому можем эксперементировать!)

@andreyrudin2286 5 ай бұрын

@@it-sin9k это да, только зачем в ответе если там ничего не сломалось возвращать 4хх ? это вообще серверные ошибки, если страницы нет, или внутренняя ошибка, если запрос нормально прошел, мне кажется должно быть 200 всегда, и уже в ответе возвращаем статус нашей бизнес логики, так сказать на программном уровне, все ли нормально и если запрашивали ответ, его тоже возвращаем.

@jolybells 5 ай бұрын

php вас настиг

@alexroberto8499 5 ай бұрын

Каналу вроде не первый год, а до сих пор приводит такие жалкие и нелепые примеры. Бекенд у него для формы регистрации без БД :D

@it-sin9k 5 ай бұрын

хмм, а почему решили, что там нет бд?

@user-mb7kp1bl4w 5 ай бұрын

Так примеры для новичков Если вы опытный разработчик, просто пройдите мимо

@mike-aaa 5 ай бұрын

Монтажер, тебя не смущают такие кривые русские шрифты?

@it-sin9k 5 ай бұрын

Если дадите чуть более конкретные советы, мы были бы рады)

@mike-aaa 5 ай бұрын

@@it-sin9k из-за кривого шрифта у вас расстояние между буквами двойное. Адоб?

@it-sin9k 5 ай бұрын

а можешь чуть конкретнее указать на какой секунде, что смущает, а то пока тяжело понять о чем речь

@mike-aaa 5 ай бұрын

@@it-sin9k ну в заставках-перебивках, у адоба такой глюк, что на некотрых кирилических шрифтах у него растояние между буквами слишком большое, поэтому и спросил

@user-wl2xp8yo6x 5 ай бұрын

Попробовал экшены с ORM. Как ловить ошибки и обрабатывать? Потому что если даже появляется ошибка, то я ее не вижу и в catch не ловится, а просто получаю SyntaxError: Unexpected identifier. Очень странно. Даже обычный console.log(true) не выводит. Просто у меня запрос проходит и в БД добавляется запись, а все повторные падают с этой ошибкой пока проект не пересоберу через Ctrl + S. Вы случайно не знаете эту проблему?

@it-sin9k 5 ай бұрын

можете набросать пример проблемы на github? попробуем посмотреть)

@user-wl2xp8yo6x 5 ай бұрын

@@it-sin9k оказывается все это время мой 2-ой коммент с ссылкой ютуб не прикреплял(. На гитхабе woodjs проект car-shop