NextJS 13. Варианты рендеринга - RSC, CSR, SSR, SSG, ISR

Серверный рендеринг, клиентский или статическая генерация страницы - сегодня Next не ограничивается этими тремя классическими подходами, а добавляет также подход серверных компонентов и инкрементальной регенерации статики.
Разбираемся с разными подходами к рендерингу и смотрим как их применять в NextJS 13.
00:00 Анонс темы
00:20 Виды рендеринга
01:02 CSR базовая теория
02:14 SSR базовая теория
03:31 RSC базовая теория
05:13 SSG базовая теория
07:09 ISR базовая теория
09:04 Варианты рендеринга в приложении
11:51 Добавление SSG
16:30 Использование ISR
25:22 Итоги
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@user-cv9xy4uu2f]

Ура. Наконец-то эту тему лаконично обьяснили в формате видео. Смотрел сейчас red group уроки next js, очень тяжёло идёт, так как у автора мысли скачут от одной к другой и нормально объяснить он тему не способен

[@mishanep]

Никогда про них не слышал

[@biLLie_wiLLie]

@@mishanep вам очень повезло) А вы смотрите вообще чьи-то курсы?

[@sgu6ena]

делает интересные вещи, но с объяснениями беда(

[@shizo380]

Михаил, такие люди, как Вы, попадают в рай без очереди, спасибо огромное за ваш труд, столько качественного контента на ютубе крайне мало!

[@IT-Svyatoslav]

Благодарю Вам Михаил за старания в создании для нас отличного материала по NextJS и не только 😊

[@biLLie_wiLLie]

наконец-то кто-то про этот лес рассказал

[@B_G_V]

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

[@user-uz8hj8dz1x]

Очень нравятся теоретические части видео, больше спасибо =)

[@dmitrysvetlov6001]

Обалденно, понятно, внятно без воды. Респект каналу.

[@visionxpro6956]

Михаил, классно рассказываешь материал, без воды, все шикарно! Хотелось услышать бы про state managment в next 13, как правильно пользоваться zustant/redux в связи с серверными компонентами и рендерингом и про библиотеки chakra ui

[@egolege]

Спасибо автору! В целом все встало на свои места

[@user-sq5fr5su3t]

спасибо! очень интересно разбираться с next.js. 😊 после обычного реакта сложновато, но того стоит)

[@Genorred]

Большое спасибо за видео, наконец всё более-менее стало на свои места.

[@helloglobalme9689]

Вчера смотрел последнее видео! Очень рад, что сегодня вышло новое! Еще не начал смотреть и ставлю лайк за актуальный материал !!!

[@user-vm2db5cq1g]

Михаил спасибо что начали записывать видео по некст))) очень актуально сейчас!

[@user-zz8rg3ko8v]

Сразу лайк! Однозначно

[@govorov_top]

Жду подробный курс на Udemy!!!

[@ferraritestarossa]

Отличное объяснение технологий рендеринга! Очень хочется посмотреть от вас раскрытие темы работы с Image и metadata в NextJS.

[@mishanep]

Про metadata было во вводном видео цикла. Про Image видео уже записано, опубликую в среду.

[@DDD-us6lx]

@@mishanep спасибо за видео! А разве на 13:15 мы не должны возвращать из generateStaticParams объект с ключом id (вместо slug)? ведь имя свойства в возвращаемом объекте должно иметь такое же название как и динамический сегмент, по-моему в документации так указано --> Example Route: /product/[id] --> generateStaticParams Return Type: { id: string }[]

[@user-mx1ui6sh6k]

круто!!!!!!!

[@user-hk7td4dh1o]

Спасибо за урок, все круто, но есть небольшая поправочка. 4.51 html с сервера приходит только один раз при первой загрузке, потом уже при навигации приходит js и payload. И вот точно утверждать не буду но при ssg hydration все равно будет.

[@user-gq4ph9gj3y]

Подскажите пожалуйста, как 404 обрабатывать страницу при неправильном переходе по ссылке. В документации описано, если мы делаем по стандартному (создаем pages папку), однако, мы идем через метод app. Был бы очень рад

[@9000ever9000]

Хотел бы задать вопрос по поводу SSG. В genderateStaticParams() вы получаете все посты и они возвращаются в сам компонент Post в объекте params. А в этом компоненте вы еще раз производите запрос к апи, чтобы получить конкретный пост, но разве этот пост не должен быть объекте params?

[@umalishonuy7977]

Я не особо опытный, но есть чувство что SSG и ISR не имеют особого смысла когда есть адекватные и простые RSC вместе с CSR. Хотя возможно что я просто чего то не понимаю))

[@oleksiishe7417]

такой вопрос на счет generateStaticParams мы же должньІ там редерити именно то количество документов, которое лежит у нас на бэкенде точнее в базе? если да то как можно сделать какойто pagination, или не как ?

[@NikolayN707]

планируется ли видео про мидлвары некста ?

[@dimashavko6777]

У меня revalidate не происходит, использую app route, подскажите в чем может быть проблема ? Делал как по видео, страница генерируется но список не обновляется.

[@me29_hi8]

Михаин. Я вот посмотрем...

[@codeurient]

я 1000 человек который поставил лайк ))

[@MihailGrib]

колесо сделало оборот

[@pvz_Game]

Помогите что лучше SR или SSR

[@romanmed9035]

почему Вы не везде используете стрелочные функции?

[@osad4enko]

Если нужна мультиязычность - то это только SSG и танцы с бубном вокруг вечной борьбы избежания попадания в клиент компонента изза использовния транслейтов

[@tymurkr]

Есть ссылка на репозиторий git?

[@innaasti6853]

Какие есть способы проверки рендеринга страниц на чужом сайте?

[@mishanep]

Для серверных компонентов есть браузерное расширение RSC Devtools. В браузере можно посмотреть исходный код страницы, если вместо полноценной разметки там несколько тегов - значит рендеринг клиентский. А вот как отличить статическую генерацию от SSR и ISR - вопрос нетривиальный. У меня на него ответа нет.

[@glebf1854]

Как вы считаете, можно ли уже использовать Next 13 App в продакшен проектах или еще рано ?

[@mishanep]

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

[@adamburke4496]

Слышал несколько раз о том, что текущая версия Next с App Router не пригодна для продакшена. А что Вы на этот счёт думаете?

[@mishanep]

Я думаю раз App router стал стабильной и рекомендованной версией, то пригоден. Переходить на новое всегда непросто, в первую очередь голова сопротивляется. Отсюда всякие отговорки про непригодность и прочее. А так - общий тренд не спешить с новинками имеет место быть. Я до сих пор шестой версии reactrouter на продакшн не встречал, хотя ему почти два года. Но это не говорит о непригодности, скорее об инертности.

[@user-ds4ik5zu9n]

Новостной сайт, более 10 тыщ новостей. Более свежие новости часто изменяются и правятся. Какую стратегию стоит использовать?

[@SingleFeniks]

Композитный сайт в Битрикс! 😄

[@user-gn1jl9sg8h]

Будет ли фулл курс на Юдеми ? Или фулл курс будет здесь ?

[@mishanep]

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

[@user-gn1jl9sg8h]

@@mishanep спасибо

[@ArtemMindsurfer]

офигеть …

[@user-dx1yq6cw3q]

Please add video for route protection using next middleware and etc... Thanx a lot

[@mishanep]

I have it already, it is on authentication topic

[@user-dx1yq6cw3q]

@@mishanep can we use middleware without next/auth lib?, there is a problem while getting token from storages in CSR and SSR modes

[@igorzubkov3877]

Михаил, добрый день. дайте контакт ваш пожалуйста. Есть трудности с покупкой ваших курсов на Udemy

[@mishanep]

На юдеми уже больше года есть нюансы с покупкой курса. Мои курсы также доступны на платформе степик. Ссылки на моем сайте MishaNep.com Моя почта есть в описании канала.

[@miloman1995s]

че то я не пойму, а почему ни в одном уроке не сказано про getServerSideProps, getStaticProps?

[@mishanep]

Некст предлагает два варианта api - классический (т.н. page router) и новый рекомендованный (он же app router). У них отличаются возможности, организация структуры проекта и синтаксис.

[@victormog]

Поленился, Михаил, сделать кнопки "Add Post" и "Edit Post"? 😉

[@user-jk8yd2bw3z]

На роликах как пройти в айти, про зарплаты и т.п просмотров по 30к++. На действительно полезном контенте, по 3-5к. Чтобы пройти в айти, смотрите Михаила, а не инфоцыган.

[@NeoCoding]

просто то для тех, кто входит, а здесь кто не выходит))

[@NeoCoding]

черт ногу сломит

[@esp2644]

Короче ничего не понял

[@dmitriystoyanov933]

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