Абсолютно новое мышление с Server Components

React Server Components - это не просто новая фича, а новая архитектура React приложений. Теперь мы можем выбросить кучу хуков, оптимизировать рендеры компонентов до небывалого уровня, но за это вам придется полностью переосмыслить способ написания вашего проекта. Как именно это работает смотрите в новом видео!

Ссылка на телеграмм канал

Поддержать Айти Синяка можно здесь:

00:00 Анонс темы
00:20 Что такое Server Components
01:30 Истина #1
04:35 Истина #2
07:16 Тестируем на YouTube
10:00 Выводы

-------------------------

Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

[SergeyPerestoronin]

Разработка с RSC превратила у меня работу в квест: как написать код так, чтобы не делать компонент пользовательским. Пришлось щепетильно выбирать библиотеки стилизации и прочие, чтобы они имели поддержку RSC. К сожалению таких стабильных библиотек очень мало. Некотороые просто прикидываются, что поддерживают RSC, а на самом деле вынуждают делать компоненты пользовательскими.
Открыл для себя недавно, что адресная строка отлично подходит для сохранения состояния и позволяет при этом не делать компонент пользовательским!😂

[virtual]

Использую серверные компоненты в проде уже год, с самого релиза 13 версии. Как таковых проблем с ними нет. Есть баги самого некста, который время от времени что-то ломает, и приходится пропускать несколько минорных версий (и потом оперативно наверстывать прогресс).
Из сложностей - да, та самая невозможность напрямую импортировать серверный компонент в клиентский. Иногда нужно один и тот же компонент оставить статическим в одном месте, но сделать интерактивным в другом, тогда проще и быстрее продублировать код - на производительность не влияет, но проект захламляет. И самая скучная сложность - необходимость убирать все лишние данные при переходе из серверного компонента, где теоритически можно оперировать мегабайтами json данных от cms без потерь в производительности, в клиентский, где каждое лишнее свойство в объекте означает лишний трафик и лишнюю задержку.

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

[РежиссёрВова]

Теперь понятно, почему консоль выводит 2 раза лог на 1 событие. Да и вообще, у тебя талант объяснять сложные архитектурные вещи простыми словами! Спасибо большое, ты очень полезен, пожалуйста продолжай делать подобные видео!

[tomitomion]

Привет, отличное видео как всегда! Тема пока сырая, думаю еще не раз придется снимать видео ))) Стоило еще упомянуть стриминг компонентов, по мне это пока самая полезная фишка

[foo]

я настрал со стола прямо в ведро с реактом

[mourat]

Все знал, но не помнил деталей. Спасибо, хорошо рассказал.

[Владимир-дио]

Спасибо!
Больше про next.js, пожалуйста!

[MykolaVladymyrskiy]

Больш дзякуй за вашыя відэа
Вельмі рады, што сустрэў ваш канал.
😁😁

[go_better]

Спасибо. Я правда фигею, как всё красиво и сразу по делу. Да ещё и понятно.

[Serhiisega]

Спасибо за видео!
На первый взгляд не понятно что делать с серверным компонентом, который грузит шоу, если по какой-то причине нужно получить список шоу заново.
Есть ли удобные способы повторно вызывать серверный компонент и соответственно заново грузить список шоу?

[Plintthes]

Спасибо за проделанную работу.
Хотелось бы подробнее обзор. Как это под капотом работает, как некоторые компоненты могут доставляться (через JSON или как). Какие best-practise теперь

[DenInside]

Ща пишу прожект на серверных компонентах на прод, мне все нравится
Из-за использования серверных компонентов практически отказался от скелетонов, т.к при первой загрузке страницы сразу же есть вся нужная дата, и в целом запросы оч быстро проходят
Столкнулся с такой проблемой:
У меня навигация на сайте слева, а справа контент. Блок навигации у меня серверный и мне нужно было сделать так, чтобы при нажатии на бургер, в мобильной версии сайта, происходила анимация навигации. Анимация должна была происходить по изменению стейта, все, что я придумал - создать клиентский компонент- обёртку, который принимает в себя чилдренов, обернуть им компонент навигации и в этом клиентском компоненте ей управлять.
Кста, зустанд вообще топ тема с некстом и серверными компонентами, тупа стейт менеджер без боли

[artemzhuravlenko]

Спасибо за видео! Хотелось бы также подробнее услышать, как работают клиентские компоненты. Судя по тому, что ты описал они работают через SSR. Так ли это?

[РоманНарожнов]

Спасибо за видео!
У меня не большой опыт, я в качестве серверных компонентов использовал только компоненты страницы для ускорения получения данных и отрисовки, которые уже пропсами раздавали эти данные в клиентские компоненты, а те в свою очередь уже динамили (при необходимости) то что нужно.

[frontend_course]

Теперь
1) добавь куки
2) получи хедеры
3) сделай так что бы запрос был на сервере, но при подгрузке еще и обратного перехода на страницу он был на клиенте
4) хоть как-то заиспользуй кастомный сервер
5) посчитай на сколько больше ты заплатишь за сервер
6) убеди текущий бек переехать на кучу запросов что бы компоненты по разному делать
7) большинство кода будет всегда в главном бандле, потому что очень много кусков глобальны

[izzy]

Глядя на то как теперь некст (и в общем-то RSC) предлагает работать с компонентами, возникает сразу вопрос - а не много ли условий? Чтобы ускорить отрисовку контента, они придумали RSC и прибили гвоздями реакт к ноде? А зачем? В чём разница между пререндером + CSR и серверными компонентами по факту? И там и там весь интерактив содержится в клиенте, хтмл всегда статичный. Не понятно. Просто не вижу смысла раскатывать весь огромный некст чтобы просто получить тот же пререндер статики + CSR компоненты с интерактивом.

Так что у меня сомнения. Либо это один маленький этап реализации новой архитектуры, которая решит все проблемы реакт приложений, либо это прикол и чуваки решили переизобрести пререндер и добавить лишний жирный слой с нодой, чтобы продавать больше подписок на vercel 🧐.

Будем посмотреть.

[YellowManPsypeople]

Спасибо. Как всегда интересно и актуально. Легко и просто разложил работу нового подхода серверных компонентов.
А нет ли в некст инструмента перерендрить компонент и сбросить его кэш?
Теже пропсы в серверном компоненте будут его обновлять?
А если обновиться на сервере компонент он перерисуется на клиенте?

[InstituteOfIndependence]

Я заметил, что серверные компоненты не отображаются в расширении components в React Dev Tools. Получается они не входят в virtual DOM?!

[Smerch-wmoc]

Заснул быстро..проспал крепко. . Выспался хорошо😊

[jonyonee]

Все трудно с серверными компонентами например мне нужен был скелетон для товаров. Товары у меня были rsc что бы сделать loading пришлось копаться искать как реализовать нашёл в твиттере решение. В нексте его кэш маршрутов бесит невозможно его отключить нормальным способом. Next auth вообще говно.