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

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

Күн бұрын

В данном видео мы поговорим про серверные компоненты 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 8 ай бұрын

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

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

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

@ayub_begimkulov 9 ай бұрын

Рад помочь!

@magnific8930 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

Не за что!

@gritsienkooleg3447 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

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

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

@ArtemMindsurfer 6 ай бұрын

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

@HEX_CAT 9 ай бұрын

🎉🎉❤❤

@TheS68123 5 ай бұрын

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

@_boolive_ 8 ай бұрын

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

@oWeRQ666 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@TheMonsterLPchanel 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@ummyusuf8206 8 ай бұрын

🎉🎉🎉🎉🎉

@MrYurgens 9 ай бұрын

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

@HEX_CAT 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

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

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

@RdmHeroe 9 ай бұрын

да, можешь

@ayub_begimkulov 9 ай бұрын

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

@AmericanDragon134 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

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

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

@ayub_begimkulov 8 ай бұрын

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

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

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

@antisocial6974 3 күн бұрын

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

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

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

@combodia123 9 ай бұрын

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

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

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

@alexandershemelin6605 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@karengrigoryan909 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@sour5786 8 ай бұрын

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

@_boolive_ 8 ай бұрын

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

@_boolive_ 8 ай бұрын

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

@artyomtaranenko2267 9 ай бұрын

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

@art7653 9 ай бұрын

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

@ayub_begimkulov 8 ай бұрын

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

@ayub_begimkulov 8 ай бұрын

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

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

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

@popuguytheparrot_ 6 ай бұрын

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

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

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

@CJIu3eHb 9 ай бұрын

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

@ayub_begimkulov 8 ай бұрын

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

@ayub_begimkulov 8 ай бұрын

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

@popuguytheparrot_ 6 ай бұрын

render functions это code smell

@kotrvnwork6665 9 ай бұрын

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

@ayub_begimkulov 8 ай бұрын

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

@vacsa 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@vacsa 9 ай бұрын

@@ayub_begimkulov 🤣🤣🤣

@oWeRQ666 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@oWeRQ666 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@NikolayKasparov 8 ай бұрын

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

@pryanik150 9 ай бұрын

React Rip 😢 Nuxt server components 💪💪💪

@ayub_begimkulov 9 ай бұрын

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

@grenadier4702 9 ай бұрын

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

@stashladki2594 9 ай бұрын

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

@grenadier4702 9 ай бұрын

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

@apexnuts9785 9 ай бұрын

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

@ayub_begimkulov 9 ай бұрын

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

@esp2644 6 ай бұрын

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