NextJS 13. Варианты рендеринга

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

Рет қаралды 25,384

Күн бұрын

Серверный рендеринг, клиентский или статическая генерация страницы - сегодня 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

Пікірлер: 61

@IT-Svyatoslav Жыл бұрын

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

@biLLie_wiLLie Жыл бұрын

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

@user-cv9xy4uu2f Жыл бұрын

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

@mishanep Жыл бұрын

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

@biLLie_wiLLie Жыл бұрын

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

@sgu6ena 4 ай бұрын

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

@shizo380 7 ай бұрын

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

@user-uz8hj8dz1x Жыл бұрын

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

@egolege Жыл бұрын

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

@B_G_V Жыл бұрын

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

@user-sq5fr5su3t 11 ай бұрын

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

@helloglobalme9689 Жыл бұрын

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

@dmitrysvetlov6001 6 ай бұрын

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

@Genorred 3 ай бұрын

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

@user-zz8rg3ko8v Жыл бұрын

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

@visionxpro6956 11 ай бұрын

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

@user-vm2db5cq1g 11 ай бұрын

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

@user-mx1ui6sh6k 7 ай бұрын

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

@ferraritestarossa 11 ай бұрын

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

@mishanep 11 ай бұрын

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

@DDD-us6lx 4 ай бұрын

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

@govorov_top Жыл бұрын

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

@me29_hi8 9 ай бұрын

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

@user-hk7td4dh1o Ай бұрын

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

@codeurient Ай бұрын

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

@umalishonuy7977 Жыл бұрын

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

@NikolayN707 10 ай бұрын

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

@osad4enko Жыл бұрын

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

@9000ever9000 11 ай бұрын

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

@user-gq4ph9gj3y Жыл бұрын

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

@ArtemMindsurfer 7 ай бұрын

офигеть …

@dimashavko6777 9 ай бұрын

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

@MihailGrib Жыл бұрын

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

@pvz_Game 3 ай бұрын

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

@oleksiishe7417 2 ай бұрын

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

@romanmed9035 Жыл бұрын

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

@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

@glebf1854 Жыл бұрын

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

@mishanep Жыл бұрын

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

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

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

@SingleFeniks 5 ай бұрын

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

@adamburke4496 Жыл бұрын

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

@mishanep Жыл бұрын

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

@innaasti6853 18 күн бұрын

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

@mishanep 18 күн бұрын

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

@user-gn1jl9sg8h 11 ай бұрын

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

@mishanep 11 ай бұрын

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

@user-gn1jl9sg8h 11 ай бұрын

@@mishanep спасибо

@tymurkr 2 ай бұрын

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

@igorzubkov3877 Жыл бұрын

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

@mishanep Жыл бұрын

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

@miloman1995s Ай бұрын

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

@mishanep Ай бұрын

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

@user-jk8yd2bw3z Жыл бұрын

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

@NeoCoding 11 ай бұрын

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

@victormog Жыл бұрын

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

@esp2644 23 күн бұрын

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

@NeoCoding 11 ай бұрын

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

@dmitriystoyanov933 11 ай бұрын

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