Все виды Server-side рендеринга в NextJS: SSR, CSR, SSG, ISR
HTML-код
- Опубликовано: 17 апр 2021
- #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
Шикааарно объяснил: красиво, легко и понятно! Респект!!!
Вот это с самого начала вижу, что будет лучшее объяснение в ру инете. Автор не мешает spa с ssr
Крутое видео, понятное объяснение без воды👍
Все по полочкам как положено. Спасибо
Хорош, очень ясно излагаешь, спасибо за информацию 🤝🏻
спасибо, очень понятно и полезно
Полезно, познавательно. Спасибо)
Спасибо, всё по полочкам, как всегда
Теперь стало понятнее, что как и когда рендерится, благодарю за видео)
Спасибо!)
Спасибо, полезный видос👍
Отличное видео, спасибо
В рекомендациях нашёл. Подписался и поставил лайк. Спасибо за объяснения
Спасибо!)
Отличное объяснение различий. Хорошо что в нексте добавили возможность юзать SSG, раньше для этого приходилось отдельно учить Gatsby. Правда, судя по тестам производительности, Gatsby пока First meaningful paint выдает быстрее
Спасибо за урок
Круто!)
Спасибо!
Бомба
Хорошее видео. Кстати SPA (CSR) тоже можно с CDN раздавать для ускорения. С тех, где можно указать правила раутинга, например в Azure есть rules. Мы в одном проекте так делали, все перенаправляя на корень. Также я бы более подробно упомянул про код сплиттинг и про то что SSR можно делать на чистом реакте без всяких фреймворков
Было бы классно если бы ты по сети показал какие данные приходят в разных видах рендеринга
Видос прикольный, однако есть пара но)
Все виды Server side, и первым же в видео идёт client side)
Такой вопрос возник, а обычный сайт без Фреймворков и библиотек по какому принципу работает, по ssr ?
Так как при каждом запросе на сервере генерируется страница
Вы не раскрыли в видео когда происходит "этап билда". Я полагаю что это происходит во время продакшн-сборки и деплоя всех готовых файлов сайта на сервер так?
А SSR не кешируется получается, если на каждый юзер реквест собирается приложение?
ISR обновляет данные по истечению таймера у конкретной страницы и только в случае запроса к этой странице. Т.е. данные не будут обновляться каждые 1 секунду или минуту и т.д., а вообще говоря, если долго не было запроса к этой странице, то там могут находиться довольно устаревшие данные.
Если только в случае запроса, то в чем отличие от SSR?
@@BlueCell страницы закешированы и их не надо рендерить пока не истёк таймер
спасибо! А не подскажете как под капотом работате эта штука ISR ? то есть при deploy приложения express запускает свой сервер и как бы слушает что в определенный момент нужно пересобрать страницу? то есть он использует что то типо node.js express server ? немного непонятно,обычно после сборки приложения на CRA я всегда просто исходники закидывал на сервер и настраивал nginx чтобы он отдавал index.html всегда на все get запросы а вот тут непонятно как происходит, буду благодарен за ответ!
Спасибо! Происходит примерно по такому алгоритму:
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. Причем, с просто в разы меньшими проблемами и гораздо большей простотой реализации.