Все виды Server-side рендеринга в NextJS: SSR, CSR, SSG, ISR

#NextJS #SSR
Подробно рассматриваем разные виды рендеринга веб-приложений в NextJS, а именно SSR (рендеринг на стороне сервера, server-side rendering), CSR (рендеринг на стороне клиента), SSG (статическая генерация), ISR (инкрементная статическая регенерация)
Плейлисты и курсы:
💡 Все о ReactJS: • 📘 ReactJS
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux: • ☕️ Redux курс
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Svelte: • 🌴 Svelte курс
Мы в соцсетях:
💻 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: github.com/vadimkorr
☕️ Поддержать канал: www.donationalerts.com/r/devm...
#devmagazine #devmagazinechannel

Пікірлер: 32

  • @user-ey4wc4nm4f
    @user-ey4wc4nm4f6 ай бұрын

    Вот это с самого начала вижу, что будет лучшее объяснение в ру инете. Автор не мешает spa с ssr

  • @oksssvv
    @oksssvv2 ай бұрын

    Хорош, очень ясно излагаешь, спасибо за информацию 🤝🏻

  • @iwannabekoshka
    @iwannabekoshka2 жыл бұрын

    Теперь стало понятнее, что как и когда рендерится, благодарю за видео)

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Спасибо!)

  • @user-je7ib6qe8y
    @user-je7ib6qe8y2 жыл бұрын

    Шикааарно объяснил: красиво, легко и понятно! Респект!!!

  • @Dima-fq1yh
    @Dima-fq1yh2 жыл бұрын

    Крутое видео, понятное объяснение без воды👍

  • @omg-go4vf
    @omg-go4vf Жыл бұрын

    Все по полочкам как положено. Спасибо

  • @yourfriend-bc1hr
    @yourfriend-bc1hr3 жыл бұрын

    спасибо, очень понятно и полезно

  • @vladprodan2379
    @vladprodan23793 жыл бұрын

    Полезно, познавательно. Спасибо)

  • @user-jd7ub3tq2b
    @user-jd7ub3tq2b Жыл бұрын

    Спасибо, всё по полочкам, как всегда

  • @aleshaidetuchitsya4300
    @aleshaidetuchitsya4300 Жыл бұрын

    Спасибо, полезный видос👍

  • @romanvinogradovby
    @romanvinogradovby2 жыл бұрын

    В рекомендациях нашёл. Подписался и поставил лайк. Спасибо за объяснения

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Спасибо!)

  • @alexsoft7073
    @alexsoft7073 Жыл бұрын

    Отличное видео, спасибо

  • @Armas0n
    @Armas0n2 жыл бұрын

    Отличное объяснение различий. Хорошо что в нексте добавили возможность юзать SSG, раньше для этого приходилось отдельно учить Gatsby. Правда, судя по тестам производительности, Gatsby пока First meaningful paint выдает быстрее

  • @arsen..
    @arsen..2 жыл бұрын

    Спасибо за урок

  • @user-ib3cx2rn8q
    @user-ib3cx2rn8q3 жыл бұрын

    Круто!)

  • @teymurtarasov9014
    @teymurtarasov9014 Жыл бұрын

    Спасибо!

  • @eurodoo
    @eurodoo5 ай бұрын

    Было бы классно если бы ты по сети показал какие данные приходят в разных видах рендеринга

  • @user-lm8py5rb4m
    @user-lm8py5rb4m2 жыл бұрын

    Бомба

  • @binaryboy80
    @binaryboy802 жыл бұрын

    Хорошее видео. Кстати SPA (CSR) тоже можно с CDN раздавать для ускорения. С тех, где можно указать правила раутинга, например в Azure есть rules. Мы в одном проекте так делали, все перенаправляя на корень. Также я бы более подробно упомянул про код сплиттинг и про то что SSR можно делать на чистом реакте без всяких фреймворков

  • @ensox
    @ensox Жыл бұрын

    Видос прикольный, однако есть пара но) Все виды Server side, и первым же в видео идёт client side)

  • @V_I_D_O
    @V_I_D_O2 жыл бұрын

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

  • @BlueCell

    @BlueCell

    2 жыл бұрын

    Если только в случае запроса, то в чем отличие от SSR?

  • @redhook777

    @redhook777

    Жыл бұрын

    @@BlueCell страницы закешированы и их не надо рендерить пока не истёк таймер

  • @daniil7243
    @daniil72432 жыл бұрын

    Такой вопрос возник, а обычный сайт без Фреймворков и библиотек по какому принципу работает, по ssr ? Так как при каждом запросе на сервере генерируется страница

  • @BlueCell
    @BlueCell2 жыл бұрын

    А SSR не кешируется получается, если на каждый юзер реквест собирается приложение?

  • @user-yg8nh2ek6w
    @user-yg8nh2ek6w Жыл бұрын

    Вы не раскрыли в видео когда происходит "этап билда". Я полагаю что это происходит во время продакшн-сборки и деплоя всех готовых файлов сайта на сервер так?

  • @kirillpavlovskii8342
    @kirillpavlovskii83422 жыл бұрын

    спасибо! А не подскажете как под капотом работате эта штука ISR ? то есть при deploy приложения express запускает свой сервер и как бы слушает что в определенный момент нужно пересобрать страницу? то есть он использует что то типо node.js express server ? немного непонятно,обычно после сборки приложения на CRA я всегда просто исходники закидывал на сервер и настраивал nginx чтобы он отдавал index.html всегда на все get запросы а вот тут непонятно как происходит, буду благодарен за ответ!

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Спасибо! Происходит примерно по такому алгоритму: 1. user1 заходит на страницу в t; 2. next кэширует страницу с expiration t + 5; 3. user2 заходит на страницу в t + 2, expiration еще не истек - отдается страница из кэша; 4. user3 заходит на страницу в t + 7, expiration истек, но этот пользователь получает страницу из кэша, пока next ее обновляет в фоновом режиме; 5. следующий user перейдет на страницу с уже обновленными данными; процесс повторяется.

  • @SingleFeniks
    @SingleFeniks5 ай бұрын

    Когда понимаешь, что SSG в Битрикс реализован адекватнее чем в Next.js. 😄

  • @yuriyovdeyev685
    @yuriyovdeyev685 Жыл бұрын

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