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

Поділитися
Вставка
  • Опубліковано 6 січ 2025

КОМЕНТАРІ • 66

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

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

    • @mishanep
      @mishanep  Рік тому +4

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

    • @biLLie_wiLLie
      @biLLie_wiLLie Рік тому +1

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

    • @sgu6ena
      @sgu6ena 11 місяців тому

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

    • @R1taz
      @R1taz 7 днів тому

      и вот спустя год, точно такие же мысли, начал смотреть этот плейлист, потом подумал, что нужно быстрее, пошёл смотреть его экспресс курс за 40 минут, по итогу вернулся всё таки к Михаилу))

  • @IT-Svyatoslav
    @IT-Svyatoslav Рік тому +21

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

  • @shizo380
    @shizo380 Рік тому +4

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

  • @biLLie_wiLLie
    @biLLie_wiLLie Рік тому +11

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

  • @B_G_V
    @B_G_V Рік тому +7

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

  • @dmitrysvetlov6001
    @dmitrysvetlov6001 Рік тому

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

  • @visionxpro6956
    @visionxpro6956 Рік тому +4

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

  • @Genorred
    @Genorred 9 місяців тому

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

  • @helloglobalme9689
    @helloglobalme9689 Рік тому

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

  • @ИльяКвитков-ц3г
    @ИльяКвитков-ц3г Рік тому +2

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

  • @egolege
    @egolege Рік тому +1

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

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

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

  • @Jbnvn
    @Jbnvn Рік тому +1

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

  • @no-fuse
    @no-fuse Рік тому

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

  • @ferraritestarossa
    @ferraritestarossa Рік тому

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

    • @mishanep
      @mishanep  Рік тому +3

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

    • @DDD-us6lx
      @DDD-us6lx 10 місяців тому

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

  • @Элдияр-с4т
    @Элдияр-с4т Рік тому

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

  • @govorov_top
    @govorov_top Рік тому +3

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

  • @R1taz
    @R1taz 4 дні тому

    столкнулся с тем, что в подходе ISR при клиентской навигации ничего не работает, пока ты страницу не перезагрузишь сам, то не добавится у тебя ничего в список

  • @ПавелСвенин-ъ4в
    @ПавелСвенин-ъ4в 8 місяців тому

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

  • @me29_hi8
    @me29_hi8 Рік тому

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

  • @umalishonuy7977
    @umalishonuy7977 Рік тому +3

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

  • @innaasti6853
    @innaasti6853 7 місяців тому +1

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

    • @mishanep
      @mishanep  7 місяців тому +1

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

  • @oleksiishe7417
    @oleksiishe7417 9 місяців тому

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

  • @VolodkaBobovich
    @VolodkaBobovich Рік тому +1

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

    • @SingleFeniks
      @SingleFeniks 11 місяців тому

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

  • @romanmed9035
    @romanmed9035 Рік тому +1

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

  • @osad4enko
    @osad4enko Рік тому

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

  • @9000ever9000
    @9000ever9000 Рік тому

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

  • @dimashavko6777
    @dimashavko6777 Рік тому

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

  • @glebf1854
    @glebf1854 Рік тому +1

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

    • @mishanep
      @mishanep  Рік тому

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

  • @EdgarHovsepyan-n7r
    @EdgarHovsepyan-n7r Рік тому +1

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

    • @mishanep
      @mishanep  Рік тому +3

      I have it already, it is on authentication topic

    • @EdgarHovsepyan-n7r
      @EdgarHovsepyan-n7r Рік тому +1

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

  • @pvz_Game
    @pvz_Game 9 місяців тому

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

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

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

  • @NikolayN707
    @NikolayN707 Рік тому

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

  • @codeurient
    @codeurient 8 місяців тому

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

  • @timur.shhhhh
    @timur.shhhhh 9 місяців тому

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

  • @miloman1995s
    @miloman1995s 8 місяців тому

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

    • @mishanep
      @mishanep  8 місяців тому

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

  • @ArtemMindsurfer
    @ArtemMindsurfer Рік тому

    офигеть …

  • @adamburke4496
    @adamburke4496 Рік тому

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

    • @mishanep
      @mishanep  Рік тому +1

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

  • @igorzubkov3877
    @igorzubkov3877 Рік тому

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

    • @mishanep
      @mishanep  Рік тому

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

  • @ИззатТурсунов
    @ИззатТурсунов Рік тому

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

    • @mishanep
      @mishanep  Рік тому

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

    • @ИззатТурсунов
      @ИззатТурсунов Рік тому

      @@mishanep спасибо

  • @MihailGrib
    @MihailGrib Рік тому +3

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

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

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

    • @NeoCoding
      @NeoCoding Рік тому +2

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

  • @victormog
    @victormog Рік тому +2

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

  • @dmitriystoyanov933
    @dmitriystoyanov933 Рік тому

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

  • @esp2644
    @esp2644 7 місяців тому

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

  • @NeoCoding
    @NeoCoding Рік тому +1

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

  • @big_606
    @big_606 3 місяці тому

    правильно ли я понимаю, что при динамических страницах у нас билдится страница только при первом ее запросе, а далее она берется из кеша?
    Я написал в 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
    @idrisveliev 4 місяці тому

    Приветствую. у меня при 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
      @mishanep  4 місяці тому

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