React Server Components | разбор и мое впечатление

Рет қаралды 7,646

Күн бұрын

В данном видео мы поговорим про серверные компоненты React (react server components). В частности разберем, что они из себя представляют, как на них уже можно писать, какие у них особенности, плюсы и минусы. И на конец я уже дам свой вердикт о том, является ли это обновление возвратом назад в 90-е, когда люди писали на php?
Ссылка на GitHub с примерами кода:
github.com/Ayub-Begimkulov/yo...
Телеграмм канал:
telegram.me/ayub_begimkulov_c...
Демо серверных компонентов от команды React:
github.com/reactjs/server-com...
Выступления по React Server Components:
• "React from Another Di...
• Data Fetching with Rea...
Таймкоды:
00:00-00:43 - Интро
00:43-01:49 - Что такое серверные компоненты?
01:49-03:32 - Как писать на серверных компонентах?
03:32-06:28 - Смотрим на пример
06:28-10:08 - Оптимизации react server components
10:08-14:11 - Ограничения серверных компонентов
14:11-16:53 - Смотрим на пример с динамикой
16:53-29:34 - Смотрим на код примера
29:34-31:14 - Смотрим на пример с улучшенными лоудерами
31:14-34:16 - Смотрим на код с примера с улучшенными лоудерами
34:16-34:26 - Вставка про телеграмм
34:26-37:05 - Плюсы
37:05-41:14 - Минусы
41:14-44:28 - Заключение

Пікірлер: 72

@dimoskuvaldos 11 ай бұрын

Супер интересно про серверные компоненты и полезные примеры! Спасибо за видео! 🙏

@user-rm7oz4xu3k 11 ай бұрын

Спасибо за конкретные примеры! Смотрел несколько видео, сейчас стало все максимально понятно.

@ayub_begimkulov 11 ай бұрын

Рад помочь!

@gritsienkooleg3447 11 ай бұрын

Спасибо за видео, Айюб! Круто послушать такое развёрнутое мнение ✨ обычно на твои вопросы отвечаю сам, потом сравниваю с твоим пониманием Действительно, истина где-то посередине 💪 Успехов, пожалуйста, продолжай! 🎉🎉🎉

@ayub_begimkulov 11 ай бұрын

Спасибо за фидбэк!

@magnific8930 11 ай бұрын

Очень ждал подобное видео, спасибо

@ayub_begimkulov 11 ай бұрын

Не за что!

@user-ru6qv3vp6p 11 ай бұрын

ура новая видео

@ArtemMindsurfer 8 ай бұрын

шикарная инфа

@HEX_CAT 11 ай бұрын

🎉🎉❤❤

@oWeRQ666 11 ай бұрын

Мне было интересно увидеть как оно передает данные, какой html приходит, стриминг наверное можно увидеть если запросить через какой-нибудь curl, как вызываются серверные действия, в общем больше подкапотных подробностей.

@ayub_begimkulov 11 ай бұрын

Да, самому тоже интересно, но еще не успел разобраться. Планирую отдельные видео делать на эту тему. По формату в демках от команды React был формат на jsx похожий. Но в некст может быть есть какие-то особенности.

@ummyusuf8206 11 ай бұрын

🎉🎉🎉🎉🎉

@TheMonsterLPchanel 11 ай бұрын

29:00 по идее если не рендерить динамические компоненты на сервере а передавать в пропсы все тудушки то удаление будет моментальным, просто нужно отправлять отдельный запрос на сервер для удаления тудушки и получения обновлённых данных

@ayub_begimkulov 11 ай бұрын

Тоже верно. Но тогда и почти все в туду листе будет клиентским компонентом. Не уверен, что в таком случае будет сильный профит. Надо на более большом приложении смотреть.

@TheS68123 8 ай бұрын

Здравствуйте. Спасибо за такой качественный разбор стало понятно. У меня вопрос а что если нужно изменить не параметры а сам путь но используя тот же подход рендеринг на сервере. Интересно это возможно?

@MrYurgens 11 ай бұрын

Спасибо за видео и разбор. Насчет возврата в 2000е. Никакого возврата, мы продолжаем писать на Php + Vue/React 😬

@HEX_CAT 11 ай бұрын

То же самое: пишем проекты на Laravel + React/Vue)

@ayub_begimkulov 11 ай бұрын

ну здесь я под возвратом подразумеваю именно рендеринг темплейтов на сервере, без апи запросов)

@ayub_begimkulov 11 ай бұрын

Говорят Laravel и сам PHP -- это разные вещи))

@_boolive_ 10 ай бұрын

Как на сервере рендерится только конкретный компонент? Когда в поле поиска вводишь текст, уходит запрос на сервер для рендера компонента.. компонент же в дереве приложения находится, серверу нужно снова создать это дерево, найти в нём нужный компонент и рендерить его или рендерится всё приложение но вернется вёрстка одного компонента?

@AmericanDragon134 11 ай бұрын

Я еще не посмотрел до конца, как только время будет обязательно посмотрю, но данный момент у меня появилось вопрос , React , server components , это типа React постепенно становится бэкэндом ?

@ayub_begimkulov 11 ай бұрын

Не совсем. Теперь у тебя есть опция рендерить твои компоненты на беке, там же и запросы нужные делать. По сути библиотека расширила свои возможности рендеринга.

@user-wt8sq9om6c 11 ай бұрын

Айюб а подскажи пожалуйста, все манипуляции с серверными компонентами, происходят по умолчанию, как замена getServerSideProps, теперь только вместо него мы получаем данные 'внутри серверного компонента', а для клиентских пишется строка c указанием, что это клиентский компонент ? А для React, тоже будет же работать ? В расширении файла надо писать *server.jsx или client.jsx ? (на хабре читал) Айюб хотел еще добавить, по поводу качества контента. Речь стала менее беглой, что не может не радовать. Один нюанс если можно попробуй пожалуйста, когда идет твое повествование, не прыгай СИЛЬНО ПО КОДУ (скроллинги, выделение текста, различные перемещения.. ) - это создаёт дополнительный дискомфорт для быстрого понимания. А в целом благодарю отличный контент делаешь!

@ayub_begimkulov 11 ай бұрын

По поводу серверных компонентов - да, они делают getServerSideProps не нужными. Но помимо этого у тебя появляются более расширенные возможности (меньше бандл, ререндер на сервере и тд). В обычном React работать будет, но, как я и говорил в уроке, нужен отдельный setup сервера + сборки + клиента с роутингом. То есть самому использовать будет не совсем удобно. По поводу расширений, насколько я понял нет. Сборщик сам компилит все компоненты, как серверные. За исключением тех, где есть 'use client'. По поводу качества - рад, что заметен прогресс. Да, с прыганием и выделением есть плохая привычка. Это причем не только во время записи видео у меня, даже когда сам пишу/читаю что-то есть такая проблема) В общем, буду исправлять, спасибо за фидбэк!

@user-wt8sq9om6c 11 ай бұрын

@@ayub_begimkulov 🙏 Тебе спасибо!!!

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

Я посмотрел примеры и появился вопрос. Могу ли я в серверных экшенах не делать API запрос на другой сервер, а выполнять там бизнес логику работы с БД. Т.е вместо того чтобы вызвать еще один запрос на удаление TODO я просто сделал бы что то вроде Todo.deleteById(id) (Это ORM модель, которая работает напрямую с БД через SQL запросы)?

@RdmHeroe 11 ай бұрын

да, можешь

@ayub_begimkulov 11 ай бұрын

Да, там можно делать что угодно. Это просто асинк функция, которая запускается на бекенде.

@pink-doublethink 11 ай бұрын

У меня бложик написан на нексте 12. Страницы бложека создаются динамически из md файлов. Если переписать сайт на 13.4, то из-за серверных компонентов сайт должен стать быстрее?

@combodia123 11 ай бұрын

Что за такое MD файлы?

@pink-doublethink 11 ай бұрын

@@combodia123 markdown файлы. В них удобно редактировать текст и конвертировать текст из этого формата в html / jsx на сайте

@alexandershemelin6605 11 ай бұрын

SSG же есть, а он быстрее всего

@ayub_begimkulov 11 ай бұрын

В первую очередь, как уже написали, тебе нужен static site generation (ssg). В 12-м нексте у тебя генерировалась сразу же статика, но все равно все скрипты подгружались и гидрировали html на клиенте. Мне кажется тут основной вопрос в том, будет ли подгружаться меньше скриптов, если ты сделаешь ssg своих серверных компонентов. На первый взгляд кажется, что да. Но на 100% не уверен, надо замерять.

@antisocial6974 2 ай бұрын

Привет,а у тебя есть ещё проекты на новинки react 18?, мне просто проект в вузе надо сделать о новинках react 18 и сравнить их с react 17, я ушёл в разработчики бд и мне эта тема,к сожалению, не очень близка(Фронт), а отчисляться не хочется, поэтому ищу способы сделать это с помощью ютуба и гита). Или у тебя может даже есть проекты прям по сравнению react 17 и react 18

@artyomtaranenko2267 11 ай бұрын

Наконец Айюб добрался до next)) Я до сих пор удивлён, почему только 25-30% разрабов юзают next в соотношении с react. К моему сожалению на текущем месте работы next никому не интересен ((

@art7653 11 ай бұрын

Скорее всего работаешь с командой, где люди постарше) Молодым разработчикам зачастую интереснее писать на новом, сам в команде, где от саг не хотят отказываться, не то что уже и next юзать😄

@ayub_begimkulov 11 ай бұрын

Мне кажется это связанно с тем, что если ты пишешь настоящее веб приложение - то толку от next.js мало. Скорее наоборот сложности добавляет. Да, можно тут найти пользу в том, что запросы отправляются раньше. Человек сразу видит данные. Но это небольшим сервером на node.js решить можно (опять же, для реальных spa, где всегда один html отдается).

@ayub_begimkulov 11 ай бұрын

Ну и проекты тоже разные. Next.js относительно недавно стал популярен. Вообще на западе прям много где требуют. Да и проекты новые в основном на нем делают. Просто большинство людей работают над более старыми проектами.

@sashas.3323 8 ай бұрын

@@ayub_begimkulov, в плане можно сделать ssr без next-а несложно? Интересно, как это сделать

@sour5786 10 ай бұрын

четкая бицуха на обложке)))

@Tunec_s_hlebom 11 ай бұрын

Честно говоря, выглядит довольно странно. Как будто мы и раньше так могли сделать с применением ssr и при этом получали профит - SEO оптимизацию, а тут нам возвращается обычный jsx, сгенерированный на бэке. Выглядит как какое-то усложнение 🤔

@ayub_begimkulov 11 ай бұрын

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

@_boolive_ 10 ай бұрын

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

@_boolive_ 10 ай бұрын

Разве быстрее ждать рендер компонента на сервере, грузить его вёрстку, чем сделать запрос к АПИ и получить чисто данные?

@popuguytheparrot_ 8 ай бұрын

32:30 Ничего странного нет. Это основная концепция компонентно-ориентированной модели React

@Mr.Bellamy 11 ай бұрын

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

@CJIu3eHb 11 ай бұрын

Тут надо было по-быстрому сделать MVP на пару страниц, но с простейшим беком. Выбрал Next, но запросы делал не через серверные компоненты, а через api возможности некста. Таким образом, бек и фронт развязаны, можно заменять их на другие технологии. Т.е. Next брался, чтобы не поднимать еще и бек отдельно - показалось, что будет проще и при старте и при деплое.

@ayub_begimkulov 11 ай бұрын

Да, это тоже показалось странным. Реакт по сути дает возможность писать всю бекенд логику в рамках компонентов, что не очень хорошо. Но я думаю у них подход такой - мы даем тебе инструменты, а на архитектуру ты сам смотри. Мне кажется, что если и использовать серверные компоненты, то только как BFF. То есть да, преимущества есть, но надо все равно относится ко всем серверным компонентам, как к фронт-части. Но не думаю, что этого будут все придерживаться...

@ayub_begimkulov 11 ай бұрын

Да, такой подход кажется самым правильным.

@popuguytheparrot_ 8 ай бұрын

render functions это code smell

@vacsa 11 ай бұрын

Что у тебя за кресло?

@ayub_begimkulov 11 ай бұрын

Я сам не знаю. Купил на местном рынке техники. Что-то с китая, но мне нравится)

@vacsa 11 ай бұрын

@@ayub_begimkulov 🤣🤣🤣

@kotrvnwork6665 11 ай бұрын

Как я понимаю это станет стандартом, как в 2020 стали хуки)

@ayub_begimkulov 11 ай бұрын

Вот даже не знаю, кажется, что push-back от комьюнити в этот раз намного хуже, чем это было с хуками.

@NikolayKasparov 10 ай бұрын

Попробовал - 💩 Теряется декларативный подход, ломается гибкость в переиспользовании компонентов, и ни под одну из ныне пополярных в реакте архитектур это безболезненно не встроить. 10 дизлайков из 10

@oWeRQ666 11 ай бұрын

Отталкиваться надо от юзкейсов, для туду листа серверный рендеринг нафиг не нужен, там где это нужно страницы должны быть ближе к статике и примеры нужны соответствующие, например, как из этого можно было бы собрать интернет магазин, какой-нибудь слайдер с картинками товара, которые одновременно будут отдаваться как статика для поиска и красиво пролистываться для пользователя.

@ayub_begimkulov 11 ай бұрын

По поводу кейсов согласен, но смысл в том, что тот же ecom не сильно отличаться то будет. Например страница результатов. Экшен добавление товара в корзину будет похож на обновление туду элемента. Слайдер -- это просто клиентский компонент, который на вход получает массив картинок. Поиск тоже похож будет, но туда еще добавятся фильтры. То есть в целом примера то достаточно должно быть для понимания особенностей. Ecom даже более динмический. Там нужно в корзину наверху синкать товары и тд.

@oWeRQ666 11 ай бұрын

@@ayub_begimkulov я имел ввиду как сделать слайдер с картинками, которые проиндексирует поисковик, в старом ssr это была не проблема, отдается статика, а на клиенте гидратация

@ayub_begimkulov 11 ай бұрын

@@oWeRQ666 Сейчас если использовать next - то это также работает. Твои клиентские компоненты будут на сервере рендериться в статику, а на клиенте уже гидрироваться. То есть в плане SEO тут ничего не теряется. Просто получается, что часть компонентов теперь могут рендериться только на сервере.

@pryanik150 11 ай бұрын

React Rip 😢 Nuxt server components 💪💪💪

@ayub_begimkulov 11 ай бұрын

А чем nuxt в этом плане лучше? Это же вообще другой фреймворк) (Vue)

@grenadier4702 11 ай бұрын

Не знаю, какую проблему это решает, но разработка становится сложнее

@stashladki2594 11 ай бұрын

По-моему как раз таки наоборот: намного более мощный роутер, серверные компоненты (да-да, это плюс, очень советую всё же разобраться) которые помимо своих "серверных" фичей заменяет getServerSideProps() на супер упрощённую модель. Всегда можно добавть 'use client' в любой компонент и он начнёт себя вести абсолютно идентично тому как было раншье.

@grenadier4702 11 ай бұрын

@@stashladki2594 что мощного в этом роутере чего так не хватало в нынешней разработке? Что сложного в gssp?

@apexnuts9785 11 ай бұрын

@@stashladki2594 я тоже так думал, пока не начал писать приложение ))

@ayub_begimkulov 11 ай бұрын

Я смотрю на это так, что если ты делаешь полностью клиентские приложения, то ничего не должно меняться. А если делаешь серверные -- то кажется плюсы должны быть значимые. Но 100% станет хотя бы чут-чуть сложнее, нужно будет понимать больше концептов. Интересно конечно, как это все дальше будет развиваться)

@esp2644 8 ай бұрын

Сложнее до того момента, пока нет готового кода