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

[@IT-Svyatoslav]

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

[@АлександрКоваль-д3щ]

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

[@mishanep]

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

[@biLLie_wiLLie]

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

[@sgu6ena]

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

[@biLLie_wiLLie]

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

[@shizo380]

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

[@B_G_V]

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

[@dmitrysvetlov6001]

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

[@Genorred]

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

[@visionxpro6956]

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

[@helloglobalme9689]

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

[@egolege]

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

[@ИльяКвитков-ц3г]

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

[@Jbnvn]

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

[@АнатолийГорбов-о1ь]

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

[@no-fuse]

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

[@ferraritestarossa]

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

[@mishanep]

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

[@DDD-us6lx]

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

[@govorov_top]

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

[@Элдияр-с4т]

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

[@ПавелСвенин-ъ4в]

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

[@umalishonuy7977]

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

[@me29_hi8]

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

[@osad4enko]

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

[@codeurient]

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

[@EdgarHovsepyan-n7r]

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

[@mishanep]

I have it already, it is on authentication topic

[@EdgarHovsepyan-n7r]

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

[@innaasti6853]

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

[@mishanep]

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

[@glebf1854]

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

[@mishanep]

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

[@VolodkaBobovich]

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

[@SingleFeniks]

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

[@MihailGrib]

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

[@ArtemMindsurfer]

офигеть …

[@romanmed9035]

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

[@oleksiishe7417]

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

[@NikolayN707]

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

[@9000ever9000]

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

[@adamburke4496]

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

[@mishanep]

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

[@pvz_Game]

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

[@timur.shhhhh]

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

[@dimashavko6777]

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

[@miloman1995s]

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

[@mishanep]

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

[@ТемирболатМаратулы]

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

[@igorzubkov3877]

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

[@mishanep]

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

[@ИззатТурсунов]

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

[@mishanep]

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

[@ИззатТурсунов]

@@mishanep спасибо

[@victormog]

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

[@АлександрЛукомский-х5ю]

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

[@NeoCoding]

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

[@esp2644]

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

[@NeoCoding]

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

[@dmitriystoyanov933]

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

[@big_606]

правильно ли я понимаю, что при динамических страницах у нас билдится страница только при первом ее запросе, а далее она берется из кеша? Я написал в stocks/[id]/page.tsx console.log(123), внутри страницы я выполняю fetch без параметров. При переходе на /stocks/1 в консоли вывелось 123, но с небольшой задержкой, при повторном переходе 123 выводится мгновенно. (Next 14.2, при билде возле страницы значок ƒ (Dynamic) server-rendered on demand) Вопрос: сохраняется ли динамически сгенерированная страница в кеш, а последующие запросы к странице достают ее из кеша? или код страницы выполняется каждый запрос и генерирует "новую" страницу? console.log(123) - то выполняется каждый раз, но после первого раза нет задержки. То есть, если я делаю fetch('...', { cache: no-store}), то страница заново билдится при каждом запросе? А если я делаю fetch без параметров, то страница билдится первый раз, а далее данные берутся из кеша, верно? Спасибо за ответы и Михаилу за безумно полезные видео!

[@idrisveliev]

Приветствую. у меня при npm run build, 14:36 выдает такую ошибку $ npm run build > mishanep-next@0.1.0 build > next build ▲ Next.js 14.2.5 - Environments: .env.local Creating an optimized production build ... uncaughtException [Error: EPERM: operation not permitted, open 'C:\Users\Idris\Desktop\mishanep\Next\my-next\.next\trace'] { errno: -4048, code: 'EPERM', syscall: 'open', path: 'C:\\Users\\Idris\\Desktop\\mishanep\\Next\\my-next\\.next\\trace' } в чем проблема?

[@mishanep]

Очень похоже на промпт к AI =D Я с таким не сталкивался. Copilot предлагает проверить наличие прав на доступ к папке .next (что вряд ли). Как вариант, предлагает удалить ее и заново запустить сборку.