NextJS 13. Использование клиентских компонентов

Разбираемся в отличии серверных и клиентских React-компонентов и в правилах их взаимодействия. Смотрим примеры с использованием стейт-менеджера для клиентских компонентов в NextJS 13.
GitHub код github.com/michey85/next-blog...
Тайм-коды:
00:00 Анонс темы
00:34 Серверные vs клиентские компоненты
04:37 Использование UI-библиотек
07:28 Активные табы навигации
12:02 Поиск по блогу на хуках
20:10 Использование Zustand
27:55 Использование SWR
31:18 Итоги
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@mishanep]

По планам в ближайших видео поговорить о создании API точек и использовании NextAuth.

[@andrewsam224]

Спасибо!!! Михаил!!!

[@d_r_robot]

Просто огромное спасибо за ваш труд!!!

[@dmitryts9093]

Спасибо, ждем новых видео

[@user-888azim-97]

Вооооо!! супер🤘

[@reactnext13]

очень ждем

[@IT-Svyatoslav]

Благодарю Вам Михаил за разбор серверных и клиентских компонент😊! По возможности прошу Вас записать видео по NextJS как можно быстрее). NextJS сейчас популярен а Вы хорошо доносите концепты❤

[@Bondarev_Igor]

Спасибо за отличное видео об Next JS! Замечательный разбор серверных и клиентских компонентов!

[@neodinok-it3ym]

Удивительно качественные и понятные видео, чего практически нет на российском ютубе. Респект

[@user-rm7oz4xu3k]

Наконец-то стала понятна эта тема с серверными компонентами, спасибо большое)

[@kaber6400]

Очень, полезное видео. Михаил, спасибо, жду продолжения)

[@user-nr1xn6zm2t]

Отличный материал! Спасибо! Сижу и сквозь ролик настырно и упорно все забиваю руками попутно обращаясь к докам версел )

[@ringnull]

Ждем продолжения в следующей серии )

[@knowledgedose1956]

Спасибо за подробный разбор и популяризацию Next и Zustand. Хотелось бы увидеть, как автор решает чуть более интересные задачи, например я столкнулся с проблемой рендера карты(openstreetmap+react-leaflet) в готовом билде.

[@user-kc1hw2mn2p]

Отлично рассказал как первую часть так и вторую. Базовое понятие некста станет понятно любому новичку 👍👍👍👍

[@ivanlitvinov7715]

Не погоджуюся, зовсім не для новачків :(

[@user-zf5wr6fs5j]

Михаил спасибо огромное за видео! Перехожу на Next14 и Zustand в вопросах серверно-клиентских компонент без провайдера просто спасение! Еще раз спасибо, буду в Испании, завезу бутылку коньяка!

[@listener487]

Спасибо за интересное видео. Я пока не понимаю полностью всей сути разделения на клиент и сервер компоненты. По этому если собираетесь выпускать полноценный курс по Next.js я с удовольствием буду среди преобретающих его.

[@unrealz3129]

Большое спасибо за видео. Если возможно, очень нужна тема аутентификации и сессий. из за новых версий напутано просто кошмар, не могу второй день настроить. Уже в планах, супер!

[@user-df2sw9sg4j]

Спасибо за хорошую работу

[@egolege]

Хороший ролик! Спасибо

[@TheAlexChannelClub]

Спасибо за ролик.

[@user-sy7cn6vc1m]

swr и zustand выглядят красиво )

[@unknown.6914]

комментарий для поддержки данного канала.

[@user-vw6es1fe7b]

Большое спасибо!

[@user-wt9ho4xg3m]

Спасибо, очень ценю ваш труд Михаил, очень развивает как специалиста. Заранее извиняюсь если не прав. у вас под конец 20й минуты закончена клиентская страница блога, но на ней есть указание метаданных. По логике не должна отработать страница в браузере должно выдать ошибку (у меня выдало). По типу: нельзя использовать метаданные в клиентских компонентах... по моему у вас проглючила сборка. Я решил эту проблему так. Вынес всю логику в компонент Blog. Создал серверный компонент BlogPage там оставил мету. Остальная логика была уже в Blog. Компонент Blog возвращал в компоненте BlogPage.

[@katada]

Отлично!

[@Sylar7773]

Огромное спасибо

[@Skif769]

МИХАИЛ, огромный вам респект и спасибо за видео урок, могли бы в будущем затронуть темы jwt, websockets?

[@mishanep]

Это есть в моем списке, как и много чего еще. Но по срокам никакой конкретики. Бэкенд у меня на канале пока не представлен, а начинать сразу с jwt было бы странно.

[@hibiride]

супер! 👍

[@SGWebDeveloper]

Михаил, спасибо за контент! Очень хотелось бы приобрести именно ваш авторский полноценный курс по современному react+next , надеюсь в будущем вы его реализуете , естественно платный )

[@mishanep]

В наши дни всё так стремительно меняется, что есть риск к концу записи курса получить уроки по легаси 😄 Я надеюсь, что текущие изменения фреймворка, которые происходят прямо на глазах, устаканятся в ближайшие полгода-год. Тогда можно будет и над курсом подумать. Хотя мне также нравится подход frontendmasters.com, у них есть просто разные версии одного и того же курса (что-то стабильно раз в год обновляется). Т.е. нужно под проект что-то вчерашнее - взял изучил. Сегодняшнее - пожалуйста. Но я пока не вижу как это реализовать на тех платформах, где я сегодня размещаю курсы. А переходить на что-то еще - затратно по времени.

[@dmitriystoyanov933]

@@mishanepМихаил, добрый день. А можно ли использовать новый некс 13.4, но по старинке? без папки апп, всё как раньше... получается все компоненты станут серверными автоматически что ли?

[@dimitriy8689]

спасибо

[@tamaraevpraksina6945]

Добрый день Михаил, благодарю за видео урок, очень полезно. У меня вопрос ? возможно ли сделать это в Context Provider , без дополнительный библиотек. Я реализовала это, но вот теперь есть сомнения все ли верно я сделала. Благодарю

[@yuriyovdeyev685]

Мне кажется для обучения тайпскрипт не нужен, как тот скрипач (если речь не идет о самом обучении TS). Если сравнить две одинаковые версии кода - вот как в примерах - с тайпскрипт и без, то в общем-то разница очень заметна. Тайпскрипт сильно загромождает код лишними сущностями, необходимости которых, на этапе обучения новым каким-то вещам, просто нет. Оно сильно заметно отвлекает от понимания концепций в целом, ибо привносит элементы вообще никак не влияющие на саму концепцию рассматриваемых технологий. А вообще у вас очень толковые уроки. Мало таких на ютубе. Большое спасибо!

[@tirthadeva_yoga]

Класс! Миша, спасибо. Третий вариант конечно самый простой. Стоит ли учить Redux, если есть Zustand?

[@mishanep]

Привет, Тимур! Зависит от целей. Если задаваться поиском работы, то Redux может помочь, т.к. он по старой памяти много где в ходу. Если свои приложения делать, то Zustrand может быть отличным решением. На текущем проекте мы с командой используем Zustand.

[@NeoCoding]

спасибо! да чакра ничт

[@artyomtaranenko2267]

Михай, добрый день, спасибо за полезную инфу. Очень хотелось бы увидеть реализацию rtk и ssr в next, очень уж болезненная тема, next-redux-wrapper - далек от совершенства, но альтернатив и нет, мб в версии 13.4.2 что-то изменилось в этом плане?)

[@alext5030]

Настолько большая апликуха, что с контекстом никак? Редакс реально нужен был только на очень больших и разветвленных апликухах

[@izzei-1614]

@@alext5030 контекст категорически не подходит для того, чтобы бизнес-данные приложения хранить, он необходим для другого

[@CHEBURAT0OR]

контекст + useReducer и вперёд :)

[@vadicus6534]

Спасибо за интересный урок) Очень интересно сравнение технологий! Заметил что функция поиска работает как то странно. Если написать например esse то результаты не содержат эту комбинацию. на пример на моменте 31.04. Так и должно быть?

[@mishanep]

Там поиск по заголовку и body идёт, поэтому норм

[@user-te1ut5ev8w]

здравствуйте! благодарю за видео! подскажите, пожалуйста, на 8:53 вы развернули шорткат reactfc с помощью какого расширения?

[@mishanep]

С помощью кастомного сниппета. В VS Code можно настроить любой вариант под себя. У меня на канале где-то было видео об этом.

[@stepanandreev3739]

Спасибо, очередное шикарное доходчивое видео). Глупый вопрос - но я не понимаю, обычно в приложении очень много компонентов требуют использование состояния или хуков, соответственно мы их должны использовать как клиентские компоненты с приставкой use client. Получается на деле практически основная масса компонентов будет клиентскими, я так понимаю они не рендеряться на сервере, тогда о каком серверном рендеринге может идти речь, получается практически любое приложение на NEXTjS превратиться в приложение на обычном REactJS, разве нет?

[@mishanep]

Смотря над каким предложением вы работаете. По сути прошлые версии некста так и работали, пока не было серверных компонентов.

[@stepanandreev3739]

@@mishanep спасибо) получается NextJS отлично подойдет и лучше использовать со статическими приложениям, то бишь даже сайтами, а не с динамическими приложениями?

[@user-yk2en7wi2o]

@@mishanep Вопрос интересный. Сейчас с этим столкнулся. Делаю статичный сайт(по большей части статичный), но хочу использовать там MUI. Подключаю его к странице и тут же вылетает ошибка, что мол нельзя использовать как серверный компонент. Все из-за того, что где-то в MUI под капотом используется хук или что то в этом роде(подозреваю что он используется при подключении своей темы). Решение - ставить 'use client', но тогда все генерируется на стороне клиента, а это плохо для SEO что для обычного сайта очень критично...В итоге нужно изощряться с обертками или отказываться от MUI в серверных компонентах...

[@NeoCoding]

@@user-yk2en7wi2o а ежели делать как это требует дока реакта - выносить именно всё что связано с ui (листья) в отдельные компоненты, а ветки и деревья приложения пусть будут серверными. тогда не должно быть проблем таких

[@izzei-1614]

@@user-yk2en7wi2o 1. КЛИЕНТСКИЕ КОМПОНЕНТЫ не плохо для seo, это все еще ssr и все компоненты до next13 были клиентскими. 2. MUI не работает в серверных компонентах потому что он использует runtime css-in-js, для того, чтобы у вас нормально работали серверные компоненты, вам нужно отказаться от MUI и использовать ту либу, в которой нет runtime css-in-js

[@rustam_gasymov]

Круто, спасибо большое!! Скажите как называется ваша тема в вскоде?

[@mishanep]

CodeSandbox

[@llwebstylell242]

Михаил а вы не подскажите случаем, почему в серверных компонентах дважды вызывается fetch ?

[@d.volobuev]

Спасибо за урок! Михаил, подскажите, как в VScode называется плагин, который отображает цветные линии от скобки ло скобки? На вид удобно.

[@mishanep]

Я не ставил никакого плагина для этого. Может быть особенность цветовой темы, у меня CodeSandbox 2021.

[@d.volobuev]

@@mishanep Нашёл. В параметрах VScode надо было включить: editor.guides.bracketPairs

[@FoldyH3ro]

Михаил, спасибо за урок. Немного не понял с Провайдером. Допустим мы помечаем Провайдер с ChakraProvider, как клиентский компонент. Не получится ли так, что все дочерки этого провайдера тоже станут клиентскими?

[@mishanep]

В качестве пропа children у клиентского компонента могут быть и серверные. Поэтому всё норм.

[@MrEmil-cf8wo]

Михаил привет,а что за тема или шрифт у тебя?

[@SanchirEmgushov]

Здравствуйте, планируете ли вы рассказать как работает реакт квери с новым некстом?

[@mishanep]

Здравствуйте. Не планирую. Пока не вижу в этом особого смысла. Как провайдер подключать (любой) я показал в этом видео. По сути, где будет реакт квери должна быть директива 'use client'. В остальном какие будут отличия?

[@user-fw7kt8qr6i]

как понимаю, то можно было еще использовать и 4 вариант с помощью server actions(на данный момент экспериментальная версия)

[@user-zk6tw7rj1t]

Михаил, вот такой вопрос, вы хотели в коде в серверной компоненте использовать зуштанд (если бы не нужно было загружать посты). Сам по зуштанд подразумевает ререндер, при условии что данные в стэйте изменились. Как серверный компонент будет ререндерится? Да и вообще использование глобальных стэйтов в Nextjs дело опасное, на сервере и на клиенте может быть рассинхронизация, при определенных кейсах. Тут надо консолить и разбираться, тема не такая очевидная как кажется. Также я не понял про SWR, во говорили что мы избавимся от use client...

[@Time2paw]

Благодарю за видео. Меня беспокоит вопрос по поводу автоимпорта, не могли бы вы подсказать как его лучше реализовать? Выглядит очень удобно, но откуда этот функционал я не смог найти.

[@mishanep]

Вообще он идёт из коробки с Vs code. Вы начинаете что-то набирать, в подсказке предлагается выбор. Чаще всего первые значения - автоимпорты. Надо просто их выбрать и нажать энтер.

[@Time2paw]

@@mishanep полазил в настройках, поискал инфу - иногда не работает, нужно в schema добавлять исключения папку node_modules. Добавил и всё заработало.

[@jonyonee]

А как сделать loading что бы работал при поиске или вообще когда запрос или mutation

[@vladimirmuratov2220]

Я только начал изучать Next, поэтому прошу не бросать в меня помидоры 🙂. По моему вариант с app directory только все усложняет. В классическом варианте есть папка pages, где находятся все страницы, все остальное в папке components, никаких use client, по умолчанию все компоненты серверные, на хуки не ругаются. В чем преимущество варианта с app directory? 🤔

[@mishanep]

В парадигме pages нет понятия серверных компонентов. Они все клиентские.

[@vladimirmuratov2220]

@@mishanep тогда почему в этих компонентах работают getStaticProps, getServerSideProps?

[@alext5030]

@@vladimirmuratov2220 А почему они не должны работать?

[@user-pn2wz2ns8q]

После генерации апи "для ленивых" в реакте, в некстжс работа с запросами выглядит как-то не однообразно и мало удобно, даже в рамках того же swr

[@user-jo8sb7zx5d]

Сейчас конечно ночь и я уже туплю. Но Серверные компоненты заменяют в итоге getServerSideProps?

[@mishanep]

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

[@user-jo8sb7zx5d]

@@mishanep спасибо за ответ, насколько увидел то курсов по новым этим фишкам у вас еще не скоро? Неделю ковыряюсь со своим проектом на нексте и жутко мучаюсь с этим getServerSideProps :(

[@kenovel908]

застрял на первом варианте реализации поиска. Ругается на то что в клиентском компоненте экспортируется метадата, почему у тебя нет такого? и еще, подскажи, пожалуйста, что за магия с reactfc? как мне себе это установить?

[@mishanep]

Я деталей не помню, но по идее правильно ругается. Скорее всего у меня серверный компонент импортирует клиентский, и мета-данные в серверном компоненте. А reactfc - это просто сниппет. В моем случае кастомный. У меня на канале где-то было видео про сниппеты в VS Code.

[@kenovel908]

@@mishanep понял, спасибо

[@NeoCoding]

кстати, Михаил, кроме истории есть ещё физика, химия, русский, литература и др)

[@mishanep]

Это вы к чему? Мне больше всего информатика нравилась.

[@NeoCoding]

@@mishanep ну всё время историю вспоминаете)

[@user-xs2dx2mh3f]

Получается , секреты всё же можно увидеть на клиенте? Ведь в случае с поиском, запросы к REST API (например) будут выполняться из браузера?

[@mishanep]

С клиента запросы должны идти на nextjs сервер и с него уже на внешний сервис с секретом. Тогда в браузере всё тип-топ. У next есть свой rest API и серверные экшны. Оба варианта подходят. Оба освещены на моем канале.

[@user-xs2dx2mh3f]

@@mishanep понял, спасибо за ответ.

[@govorov_top]

Это значит что скоро на Udemy ждать курса по NextJS?))))))))))))

[@mishanep]

Поживем - увидим =) Пока выглядит как главный кандидат в курсы.

[@daniilkononchuk8837]

Подскажите пожалуйста. Если серверный компонент состоит из двух клиентских, это как-то оптимизирует приложение, в отличии от того чтобы сделать клиентский компонент в клиентском компоненте? Серверный или Клиент | | | Клиент Клиент Клиент

[@izzei-1614]

если серверный компонент большой, то да, если тупа обертка, то в этом нет смысла

[@NayroTV]

А нафига вообще zustand или SWR? Нет, я понимаю в качестве развития можно изучить быстро, но нельзя было на Redux-tollkit сделать и ReactQuery? Ааааа, понял, это специально так сделано... чтобы мы сами на Redux-tollkit и ReactQuery перекинули всё :) понятно... Спасибо вам за настоящею практику!

[@erxweo]

почему не используешь FC для компонентов, а уже в него дженериком тип пропсов? выглядит намного лучше: const Navigation: FC = ({navLinks}) => { ....

[@artempaskal7986]

Изучаю Next Js, сделал тестовое похожее на то, что на видео, но не понятно с клиентскими компонентами, я правда использвал редакс, та еще шляпа, но когда я с помощью стейт менеджера запрашиваю посты, они получается в сорсах страницы не видны, они же не серверные, они клиенсткие, может ктото подсказать, это я затупил, или так оно и есть???

[@behrambayramli6545]

Пожалуйста, не могли бы вы выполнить аутентификацию и авторизацию в next13 + ExpressJs (токен доступа JWT)

[@mishanep]

Cочетание Next и Express - хорошая идея? Если бэкенд у нас полностью на JS, то почему не писать его сразу в Next? Next имеет серверную часть и может спокойно общаться с БД. Часто Next используют как прослойку между фронтендом и бэкендом, когда бэк написан на Java или других языках. А когда всё JS/TS, то нужен ли Express?

[@behrambayramli6545]

@@mishanep я свами согласен но если проек уже написано на express + react, и надо заменит react на next и не писат баск заново

[@etemax]

в rtk query больше нет надобности? ну раз nextjs теперь сам хеширует данные

[@ramilb.252]

Как называется плагин который автоматически импортирует все зависимости? и другие которые помогают быстро разрабатывать?

[@mishanep]

Это встроенная возможность VS Code. Т.е. специальное расширение я не использую.

[@ramilb.252]

@@mishanep а как включить

[@en_kratia]

@@ramilb.252 он уже включен изначально, не нужно ничего специально делать, просто установить VS Code и открыть его.

[@user-dw4pi5gy7t]

На 16 минуте не совсем понял с постами, может кто-то объяснит если не затруднит. Мы посты импортирвали на страницу блога, хотя до этого говорилось что серверные компоненты нужно как пропсы прокидывать. Я что-то явно не понимаю или это ошибка просто?

[@user-dw4pi5gy7t]

Как я понял это косячок да?

[@user-yf3ec9ml1j]

А как затриггерить рендер серверного компонента на клиенте?

[@mishanep]

Серверный компонент рендерится на сервере. На клиенте вся логика до оператора return на клиент просто не попадает. Поэтому никак.

[@Tonylylven]

можешь сказать как ты быстро создаешь функцию для компонента реакт?

[@mishanep]

Кастомный сниппет для VS Code. У меня на канале было видео как их создавать.

[@Tonylylven]

@@mishanep нашел аналогичные в плагинах вс кода без стрелочной функции. Спасибо

[@artyomtaranenko2267]

Вот по этой причине мне и нравится юзать редакс, так с добавлением rtk мы одновременно запрашиваем данные и храним в сторе, правда оч не хватает инфинити скролла.

[@adamburke4496]

А как он заводится с Next'ом? Нужно дополнительный пакет Wrapper устанавливать?

[@TarasovFrontDev]

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

[@biLLie_wiLLie]

Объясните для меня плиз - зачем мне вообще может быть нужен обычный реакт? Я могу всегда и для всех проектов использовать Next js?

[@mishanep]

С появлением серверных компонентов этот вопрос, действительно, становится более насущным. Так-то SSR не на каждом проекте нужен, например, вы делаете админскую панель сайта и закрытый от поисковиков раздел, да и не каждый одностраничник нуждается в SEО. Теперь же серверные компоненты еще и бандл оптимизируют. Но с другой стороны, помимо Nextjs есть куча других инструментов использующих Реакт. У них и SSR может быть при необходимости, а завтра там также появится возможность использования серверных компонентов. Потом сам Next тоже что-то добавляет в бандл, он не идет бесплатен.

[@ivanshalaginov548]

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

[@yevhenfodorov121]

как в этом всем разобраться? не понимаю!!!

[@sno-oze]

а преимущества какие у серверных? не увидел явного сравнения, мол, серверные лучше здесь потому что получили такое преимущество, выиграли в чём-то, а там где использовали клиентские компоненты, то выиграли здесь, получили преимущество здесь. по факту, видно, что та же Chakra вся на клиентских работает, ну т.е. даже они не понимают смысла от серверных.

[@mishanep]

При использовании серверных компонентов поставляется меньше js-кода на клиент, в том числе в бандл не попадают зависимости, используемые только в серверных компонентах.

[@sno-oze]

@@mishanep во 2м примере, что показали, где по сути вынесли input в отдельный компонент, а обёртка стала серверной, мы особо ничего и не сэкономили-то. Вот был бы реальный пример, где экономия сотни кб, а так нечто странное. Да и ещё самому заботиться о том, мол, серверный или клиентский компонент, хотя, вроде бы nextjs ругается когда используем хуки в серверном.

[@rustwithoutrust]

Брат шахматиста?

[@mishanep]

Нет

[@MrZuven]

Привет, ты нашел способ как обновлять серверные компоненты? перерыл кучу инфы никто кроме как router.refresh(); ничего не советует, но это такая шляпа, весь сайт перерендеривается. Допустим пример, я добавил пост на странице добавления, иду на главную, а данные с сервака не обновляются, он тупо не идет даже в функцию где эти данные о постах фетчатся, пока не обновишь страницу. Хоть этот Link не используй, а просто тег а