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

Поделиться
HTML-код
  • Опубликовано: 28 сен 2024

Комментарии • 138

  • @kotifnat
    @kotifnat 9 месяцев назад +29

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

  • @aquinary.
    @aquinary. 9 месяцев назад +23

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад +6

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

    • @МихаилБеляков-я7ю
      @МихаилБеляков-я7ю 7 месяцев назад

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

  • @RomanDryndik
    @RomanDryndik 9 месяцев назад +10

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

  • @DemetriyArh
    @DemetriyArh 9 месяцев назад +8

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

  • @DevilAlex03
    @DevilAlex03 9 месяцев назад +7

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад +1

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

    • @arman-6172
      @arman-6172 9 месяцев назад

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

    • @DevilAlex03
      @DevilAlex03 9 месяцев назад

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

    • @kulakofft4
      @kulakofft4 9 месяцев назад

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

    • @arman-6172
      @arman-6172 9 месяцев назад

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

  • @Умарбек-Махмадиев
    @Умарбек-Махмадиев 3 месяца назад

    это гениаольно, зря я не смотрел тебя раньше, я бы сейчас былбы суперменом в мире фронтов магий nextjs

  • @onet1589
    @onet1589 9 месяцев назад +5

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад +4

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

  • @whi5k3y22
    @whi5k3y22 9 месяцев назад +30

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

    • @dimitro.cardellini
      @dimitro.cardellini 9 месяцев назад +16

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

    • @KhikmatjonAzizov
      @KhikmatjonAzizov 9 месяцев назад +10

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

    • @artem_bohak
      @artem_bohak 9 месяцев назад +7

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

    • @Roger-qj4wu
      @Roger-qj4wu 9 месяцев назад +3

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

    • @ДиалектикаКринжа
      @ДиалектикаКринжа 9 месяцев назад

      @@KhikmatjonAzizov на пк нет

  • @jonyonee
    @jonyonee 9 месяцев назад +4

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад +2

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

  • @AlexanderBorshak
    @AlexanderBorshak 4 месяца назад

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

    • @it-sin9k
      @it-sin9k  4 месяца назад

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

    • @AlexanderBorshak
      @AlexanderBorshak 4 месяца назад

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

    • @it-sin9k
      @it-sin9k  4 месяца назад +1

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

    • @AlexanderBorshak
      @AlexanderBorshak 4 месяца назад

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

  • @ЗакирПулатов-ы8д
    @ЗакирПулатов-ы8д 9 месяцев назад +1

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

    • @владимирсенцов-р1ю
      @владимирсенцов-р1ю 8 месяцев назад

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

  • @alexlmaxl4966
    @alexlmaxl4966 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

  • @Сергей-э8о6м
    @Сергей-э8о6м 9 месяцев назад +2

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

    • @Svyatoslavik2
      @Svyatoslavik2 9 месяцев назад +2

      Нет конечно

    • @it-sin9k
      @it-sin9k  9 месяцев назад +1

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

  • @foldisnomistake
    @foldisnomistake 5 месяцев назад

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

    • @it-sin9k
      @it-sin9k  5 месяцев назад

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

    • @foldisnomistake
      @foldisnomistake 5 месяцев назад

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

    • @it-sin9k
      @it-sin9k  5 месяцев назад

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

  • @joyStackk
    @joyStackk 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @joyStackk
      @joyStackk 9 месяцев назад

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

  • @couragic
    @couragic 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @angelicoctahedron3646
      @angelicoctahedron3646 9 месяцев назад

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

    • @couragic
      @couragic 9 месяцев назад

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

  • @HEX_CAT
    @HEX_CAT 9 месяцев назад

    ❤❤❤🎉🎉🎉

  • @123vitaha
    @123vitaha 9 месяцев назад +1

    ретарн

  • @ИванОкоянный-с9к
    @ИванОкоянный-с9к 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

  • @rudinandrey
    @rudinandrey 9 месяцев назад +2

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @rudinandrey
      @rudinandrey 9 месяцев назад +2

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

  • @ignatneko1339
    @ignatneko1339 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @ignatneko1339
      @ignatneko1339 9 месяцев назад

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

  • @ТёмаКоролёв-к6ф
    @ТёмаКоролёв-к6ф 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @ТёмаКоролёв-к6ф
      @ТёмаКоролёв-к6ф 9 месяцев назад

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

  • @Roger-qj4wu
    @Roger-qj4wu 9 месяцев назад +2

    Ага, жаль только, что некст - просто хайповое г..но

    • @user-uv4rk1vt7x
      @user-uv4rk1vt7x 9 месяцев назад

      Angular или VueX лучше во всех случаях ? 🙂

    • @Roger-qj4wu
      @Roger-qj4wu 9 месяцев назад

      @@user-uv4rk1vt7x эм... А при чем тут Next и "Angular или VueX"🤔

    • @golden_smiles
      @golden_smiles 9 месяцев назад

      Жаль не это, а что реакт подминают.

    • @Roger-qj4wu
      @Roger-qj4wu 9 месяцев назад

      @@golden_smiles react был есть и будет. А для сср будет куча альтернатив нексту в ближайшем будущем. То же астро.

    • @NeoCoding
      @NeoCoding 9 месяцев назад +1

      @@golden_smiles подмяли реакт

  • @ЯрославБойко-п8р
    @ЯрославБойко-п8р 8 месяцев назад

    next-safe-action - используем эту либу для хендлинга статусов и ошибок в серверных экшенах

  • @alexeyilin1527
    @alexeyilin1527 9 месяцев назад +15

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

  • @umidullo
    @umidullo 9 месяцев назад +17

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

    • @ОлегНаянов-э9щ
      @ОлегНаянов-э9щ 9 месяцев назад +3

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад +5

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

    • @nan1000
      @nan1000 9 месяцев назад +1

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

  • @Сергей-э8о6м
    @Сергей-э8о6м 9 месяцев назад +6

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

  • @1revolman1
    @1revolman1 7 месяцев назад +1

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

  • @Илья-ж8ч8о
    @Илья-ж8ч8о 9 месяцев назад +3

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

  • @qwezxc9758
    @qwezxc9758 9 месяцев назад +1

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

  • @sv3163
    @sv3163 9 месяцев назад +4

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

    • @SubaruImprezaEdet
      @SubaruImprezaEdet 8 месяцев назад +1

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

  • @RealToptuK
    @RealToptuK 9 месяцев назад +9

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

    • @DoktorZlo96
      @DoktorZlo96 9 месяцев назад +1

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад +2

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

    • @FailValiev
      @FailValiev 9 месяцев назад +1

      Вордпресс

    • @vas_._sfer6157
      @vas_._sfer6157 9 месяцев назад

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

    • @infantfrontender6131
      @infantfrontender6131 9 месяцев назад

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

  • @_renamed_
    @_renamed_ 9 месяцев назад +1

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

  • @jolybells
    @jolybells 9 месяцев назад +4

    php вас настиг

  • @DemetriyArh
    @DemetriyArh 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад +1

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

  • @user-xu9tb7oe2z
    @user-xu9tb7oe2z 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @user-xu9tb7oe2z
      @user-xu9tb7oe2z 9 месяцев назад

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

  • @mike-aaa
    @mike-aaa 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @mike-aaa
      @mike-aaa 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @mike-aaa
      @mike-aaa 9 месяцев назад

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

  • @popuguytheparrot_
    @popuguytheparrot_ 9 месяцев назад

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @infantfrontender6131
      @infantfrontender6131 9 месяцев назад

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

  • @markerok3411
    @markerok3411 9 месяцев назад +6

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

    • @kirill-eremin
      @kirill-eremin 9 месяцев назад +7

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

    • @infantfrontender6131
      @infantfrontender6131 9 месяцев назад +1

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

    • @golden_smiles
      @golden_smiles 9 месяцев назад +1

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

  • @АлександрГерасимов-с3щ
    @АлександрГерасимов-с3щ 9 месяцев назад

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

  • @alexroberto8499
    @alexroberto8499 9 месяцев назад +1

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

    • @it-sin9k
      @it-sin9k  9 месяцев назад

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

    • @РусланА-ф2н
      @РусланА-ф2н 9 месяцев назад +1

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