Все виды 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
Вот это с самого начала вижу, что будет лучшее объяснение в ру инете. Автор не мешает spa с ssr
Хорош, очень ясно излагаешь, спасибо за информацию 🤝🏻
Теперь стало понятнее, что как и когда рендерится, благодарю за видео)
@DevMagazineChannel
2 жыл бұрын
Спасибо!)
Шикааарно объяснил: красиво, легко и понятно! Респект!!!
Крутое видео, понятное объяснение без воды👍
Все по полочкам как положено. Спасибо
спасибо, очень понятно и полезно
Полезно, познавательно. Спасибо)
Спасибо, всё по полочкам, как всегда
Спасибо, полезный видос👍
В рекомендациях нашёл. Подписался и поставил лайк. Спасибо за объяснения
@DevMagazineChannel
2 жыл бұрын
Спасибо!)
Отличное видео, спасибо
Отличное объяснение различий. Хорошо что в нексте добавили возможность юзать SSG, раньше для этого приходилось отдельно учить Gatsby. Правда, судя по тестам производительности, Gatsby пока First meaningful paint выдает быстрее
Спасибо за урок
Круто!)
Спасибо!
Было бы классно если бы ты по сети показал какие данные приходят в разных видах рендеринга
Бомба
Хорошее видео. Кстати SPA (CSR) тоже можно с CDN раздавать для ускорения. С тех, где можно указать правила раутинга, например в Azure есть rules. Мы в одном проекте так делали, все перенаправляя на корень. Также я бы более подробно упомянул про код сплиттинг и про то что SSR можно делать на чистом реакте без всяких фреймворков
Видос прикольный, однако есть пара но) Все виды Server side, и первым же в видео идёт client side)
ISR обновляет данные по истечению таймера у конкретной страницы и только в случае запроса к этой странице. Т.е. данные не будут обновляться каждые 1 секунду или минуту и т.д., а вообще говоря, если долго не было запроса к этой странице, то там могут находиться довольно устаревшие данные.
@BlueCell
2 жыл бұрын
Если только в случае запроса, то в чем отличие от SSR?
@redhook777
Жыл бұрын
@@BlueCell страницы закешированы и их не надо рендерить пока не истёк таймер
Такой вопрос возник, а обычный сайт без Фреймворков и библиотек по какому принципу работает, по ssr ? Так как при каждом запросе на сервере генерируется страница
А SSR не кешируется получается, если на каждый юзер реквест собирается приложение?
Вы не раскрыли в видео когда происходит "этап билда". Я полагаю что это происходит во время продакшн-сборки и деплоя всех готовых файлов сайта на сервер так?
спасибо! А не подскажете как под капотом работате эта штука ISR ? то есть при deploy приложения express запускает свой сервер и как бы слушает что в определенный момент нужно пересобрать страницу? то есть он использует что то типо node.js express server ? немного непонятно,обычно после сборки приложения на CRA я всегда просто исходники закидывал на сервер и настраивал nginx чтобы он отдавал index.html всегда на все get запросы а вот тут непонятно как происходит, буду благодарен за ответ!
@DevMagazineChannel
2 жыл бұрын
Спасибо! Происходит примерно по такому алгоритму: 1. user1 заходит на страницу в t; 2. next кэширует страницу с expiration t + 5; 3. user2 заходит на страницу в t + 2, expiration еще не истек - отдается страница из кэша; 4. user3 заходит на страницу в t + 7, expiration истек, но этот пользователь получает страницу из кэша, пока next ее обновляет в фоновом режиме; 5. следующий user перейдет на страницу с уже обновленными данными; процесс повторяется.
Когда понимаешь, что SSG в Битрикс реализован адекватнее чем в Next.js. 😄
А какой смысл использовать весь этот чрезвычайно гемороидальный подход с SSR, если при нем каждый запрос приводит к полной генерации страницы на сервере. С таким же успехом можно юзать классический MPA. Причем, с просто в разы меньшими проблемами и гораздо большей простотой реализации.