NextJS 13. Варианты рендеринга - RSC, CSR, SSR, SSG, ISR
HTML-код
- Опубликовано: 20 июн 2024
- Серверный рендеринг, клиентский или статическая генерация страницы - сегодня 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 
Наука
Благодарю Вам Михаил за старания в создании для нас отличного материала по NextJS и не только 😊
Ура. Наконец-то эту тему лаконично обьяснили в формате видео. Смотрел сейчас red group уроки next js, очень тяжёло идёт, так как у автора мысли скачут от одной к другой и нормально объяснить он тему не способен
Никогда про них не слышал
@@mishanep вам очень повезло) А вы смотрите вообще чьи-то курсы?
делает интересные вещи, но с объяснениями беда(
наконец-то кто-то про этот лес рассказал
Михаил, такие люди, как Вы, попадают в рай без очереди, спасибо огромное за ваш труд, столько качественного контента на ютубе крайне мало!
Очень нравятся теоретические части видео, больше спасибо =)
спасибо! очень интересно разбираться с next.js. 😊 после обычного реакта сложновато, но того стоит)
Спасибо автору!
В целом все встало на свои места
Обалденно, понятно, внятно без воды. Респект каналу.
Вчера смотрел последнее видео! Очень рад, что сегодня вышло новое! Еще не начал смотреть и ставлю лайк за актуальный материал !!!
Вся серия видосов по Next 13, получилась отличной. Коротко, понятно, без воды, с хорошими примерами. 👍👍👍
Надеюсь и дальше будете нас радовать видосами по этому фреймворку.
Михаил спасибо что начали записывать видео по некст))) очень актуально сейчас!
Большое спасибо за видео, наконец всё более-менее стало на свои места.
Сразу лайк! Однозначно
Михаил, классно рассказываешь материал, без воды, все шикарно! Хотелось услышать бы про state managment в next 13, как правильно пользоваться zustant/redux в связи с серверными компонентами и рендерингом и про библиотеки chakra ui
круто!!!!!!!
Отличное объяснение технологий рендеринга! Очень хочется посмотреть от вас раскрытие темы работы с Image и metadata в NextJS.
Про metadata было во вводном видео цикла. Про Image видео уже записано, опубликую в среду.
@@mishanep спасибо за видео! А разве на 13:15 мы не должны возвращать из generateStaticParams объект с ключом id (вместо slug)? ведь имя свойства в возвращаемом объекте должно иметь такое же название как и динамический сегмент, по-моему в документации так указано --> Example Route: /product/[id] --> generateStaticParams Return Type: { id: string }[]
Жду подробный курс на Udemy!!!
Михаин. Я вот посмотрем...
я 1000 человек который поставил лайк ))
Спасибо за урок, все круто, но есть небольшая поправочка. 4.51 html с сервера приходит только один раз при первой загрузке, потом уже при навигации приходит js и payload. И вот точно утверждать не буду но при ssg hydration все равно будет.
колесо сделало оборот
планируется ли видео про мидлвары некста ?
Хотел бы задать вопрос по поводу SSG. В genderateStaticParams() вы получаете все посты и они возвращаются в сам компонент Post в объекте params. А в этом компоненте вы еще раз производите запрос к апи, чтобы получить конкретный пост, но разве этот пост не должен быть объекте params?
Я не особо опытный, но есть чувство что SSG и ISR не имеют особого смысла когда есть адекватные и простые RSC вместе с CSR. Хотя возможно что я просто чего то не понимаю))
офигеть …
Если нужна мультиязычность - то это только SSG и танцы с бубном вокруг вечной борьбы избежания попадания в клиент компонента изза использовния транслейтов
Подскажите пожалуйста, как 404 обрабатывать страницу при неправильном переходе по ссылке. В документации описано, если мы делаем по стандартному (создаем pages папку), однако, мы идем через метод app. Был бы очень рад
почему Вы не везде используете стрелочные функции?
Помогите что лучше SR или SSR
такой вопрос на счет generateStaticParams мы же должньІ там редерити именно то количество документов, которое лежит у нас на бэкенде точнее в базе? если да то как можно сделать какойто pagination, или не как
?
Please add video for route protection using next middleware and etc... Thanx a lot
I have it already, it is on authentication topic
@@mishanep can we use middleware without next/auth lib?, there is a problem while getting token from storages in CSR and SSR modes
У меня revalidate не происходит, использую app route, подскажите в чем может быть проблема ?
Делал как по видео, страница генерируется но список не обновляется.
Как вы считаете, можно ли уже использовать Next 13 App в продакшен проектах или еще рано ?
Смотря что за проекты и какие ещё инструменты используются. Подход серверных и клиентских компонентов новый и не инструменты готовы с ним работать без костылей. Однако наверняка найдется пул небольших и средних проектов, для которых эти ограничения не будут проблемой. А так - общий тренд всегда был про подождать, вне зависимости от пакета.
Новостной сайт, более 10 тыщ новостей. Более свежие новости часто изменяются и правятся. Какую стратегию стоит использовать?
Композитный сайт в Битрикс! 😄
Есть ссылка на репозиторий git?
Слышал несколько раз о том, что текущая версия Next с App Router не пригодна для продакшена. А что Вы на этот счёт думаете?
Я думаю раз App router стал стабильной и рекомендованной версией, то пригоден. Переходить на новое всегда непросто, в первую очередь голова сопротивляется. Отсюда всякие отговорки про непригодность и прочее. А так - общий тренд не спешить с новинками имеет место быть. Я до сих пор шестой версии reactrouter на продакшн не встречал, хотя ему почти два года. Но это не говорит о непригодности, скорее об инертности.
Какие есть способы проверки рендеринга страниц на чужом сайте?
Для серверных компонентов есть браузерное расширение RSC Devtools.
В браузере можно посмотреть исходный код страницы, если вместо полноценной разметки там несколько тегов - значит рендеринг клиентский.
А вот как отличить статическую генерацию от SSR и ISR - вопрос нетривиальный. У меня на него ответа нет.
Будет ли фулл курс на Юдеми ? Или фулл курс будет здесь ?
Пока не приступал. На Ютубе конкретного контент плана нет. Посмотрим. Есть желание сделать полноценный курс, но время трудно выделить.
@@mishanep спасибо
Михаил, добрый день. дайте контакт ваш пожалуйста. Есть трудности с покупкой ваших курсов на Udemy
На юдеми уже больше года есть нюансы с покупкой курса. Мои курсы также доступны на платформе степик. Ссылки на моем сайте MishaNep.com
Моя почта есть в описании канала.
че то я не пойму, а почему ни в одном уроке не сказано про getServerSideProps, getStaticProps?
Некст предлагает два варианта api - классический (т.н. page router) и новый рекомендованный (он же app router). У них отличаются возможности, организация структуры проекта и синтаксис.
На роликах как пройти в айти, про зарплаты и т.п просмотров по 30к++. На действительно полезном контенте, по 3-5к. Чтобы пройти в айти, смотрите Михаила, а не инфоцыган.
просто то для тех, кто входит, а здесь кто не выходит))
Поленился, Михаил, сделать кнопки "Add Post" и "Edit Post"?
😉
черт ногу сломит
Короче ничего не понял
Как-то трудно понять, может я тупой, хз. Вроде работаю с некстом, но запросы делаю или в юзэффекте или гетсервесайд пропс, остальное - какой-то темный лес непонятно зачем сделанный.