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

Разбираемся в отличии серверных и клиентских React-компонентов и в правилах их взаимодействия. Смотрим примеры с использованием стейт-менеджера для клиентских компонентов в NextJS 13.

Тайм-коды:
00:00 Анонс темы
00:34 Серверные vs клиентские компоненты
04:37 Использование UI-библиотек
07:28 Активные табы навигации
12:02 Поиск по блогу на хуках
20:10 Использование Zustand
27:55 Использование SWR
31:18 Итоги

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[mishanep]

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

[IT-Svyatoslav]

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

[ПолякиНовороссийск]

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

[neodinok-itym]

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

[КонстантинСтремянной]

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

[VladPashkovski-qq]

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

[Bondarev_Igor]

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

[knowledgedose]

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

[ВалентинДжексон]

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

[НикитаШевченко-ыя]

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

[kaber]

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

[rt]

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

[listener]

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

[unknown.]

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

[Skif]

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

[yuriyovdeyev]

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

[tamaraevpraksina]

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

[SGWebDeveloper]

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

[ИльяОрлов-вю]

Подскажите, в данном случае какой профит от использования next в плане seo, если основное содержимое страницы рендерится на клиенте?

[ВячеславС-км]

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