Що таке Server-Side Rendering (SSR) на прикладі React. Порівняння з Client-Side (CSR). SSG та ISR?
Вставка
- Опубліковано 24 січ 2022
- В даному відео поговоримо про серверний рендеринг та як його реалізувати за допомогою React. Детально порівняємо усі способи рендерингу додатків:
- Client-Side Rendering (CSR)
- Server-Side Rendering (SSR)
- Static Site Generation (SSG)
- Incremental Static Regeneration (ISR)
Порівняємо переваги та недоліки кожного з підходів та інструменти для реалізації.
Приклад реалізації SSR за допомогою NodeJS - github.com/MaksymRudnyi/turor...
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 5363 5426 0316 4386
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ / travelscode
#React #SSR #MaksymRudnyi #ServerSideRendering #ClientSideRendering #StaticSiteGeneration #IncrementalStaticRegeneration - Наука та технологія
Залишися питання? Задавайте в телеграм чаті t.me/joinchat/H4AF4W4dfGeGepNQ Щоб не пропускати відео та корисну інформацію - підписуйтесь на телеграм групу t.me/maksymrudnyi.
Підтримати канал можна на Патреоні - www.patreon.com/rudnyi
Ну і не забувайте підписуватись в Instagram - instagram.com/maksym_rudnyi/ Думаю активніше зайнятися інстаграмом.
P.S. UA-cam модерує коментарі та видаляє ті що йому не подобаються, перевіряйте чи ваш коментар залишився після додавання.
у мене до вас питання, при ssr node у приклалі котрий ви запропонували , як і багато де ще, це реалізовано в одній папці з реактом, а що роботи коли сервер на ноді, и реакт у різних папках(client та server)як тоді реалізувати ssr для ноди? Підкажіть будб ласка
@@denisstrizhalov1532 В мене є курс на Udemy, там може бути якась корисна інформація. Посилання на безкоштовну реєстрацію - www.udemy.com/course/react-server-side-rendering/?couponCode=37D2BB35821365BB9CF1 Буду вдячним за хороший відгук і якщо поставите 5 зірочок)
awesome, finally a good explanation
Glad you liked it!
Дякую!
дякуємо за україномовний контент🙂
Дуже засмучує кількість переглядів, Максиме, дякую за роботу
Дякую. Тема складна занадто.
Дякую гарно за пояснення, було досить цікаво і зрозуміло!
Дякую, зрозуміло пояснюєте! Хочеться більше такого контенту)
Так курс по git цікаво, особливо в деталях
Скоро буде.
Макс молодець. Пишаюся!!!
Дякую за відео. Лайк!)
Круто! 👍
Спасибі за корисну інформацію!
Радий чути. Будь ласка.
я все таки знайшов такий канал як хотів) підписка
Радий чути.
Дякую ! Топ контент !
Цікава тема, дякую! Єдине що, було б більш зрозуміло з картинками чи схемами, бо на словах воно не з першого разу сприймається :)
Дякую. Схеми планував, навіть знайшов чудові варіанти, але забув додати на відео. Скоро випущу статтю на DOU на цю тему, там уже постараюсь додати.
Лайк і підписка за знання. І Україномовний контент
я краще нічого не бачила на цю тему!
You've done a good job! Судячи з відео мені треба більше уваги приділити Next.js. Не плануєте курс по Next.js та TypeScript? Аналогічний курсу React, можна без advance level. Останнім часом в вас на каналі не було практичного контенту. Інформаційний контент теж круто, дуже зручно слідкувати за каналом і бути в курсі подій в веб розробці та в схожих темах, ще раз дякую!
Планую такі курси. Часу обмаль щоб все зробити. Хочу найближчим часом по Git та JS зробити. Планів багато, стараюсь все встигнути.
З часом біда, мені теж критично його не хватає, хочеться весь час приділяти розвитку в програмуванні, але робота не дозволяє, тож в мене це як хобі)))
Дуже круто,але звернув увагу на "наший", "ваший", нічого поганого , але цікавий діалект)Перший раз таке чую))
Дякую за контент українською!
Сподіваюсь наповнення теж було корисним.
дада додаток для Фокс компанії, було таке 🙃
та на початку було ще й дуже непогано. Топовий фреймворк вирішили заюзати, проєкти з нуля, ще й мій перший проєкт в Єпамі був.
Велика подяка за тему і за українську!
Погоджусь, що візуальної картинки з схемками, бракує.
Дякую. В наступних відео уже постараюсь більше візуалізації додати.
Підкажіть будь ласка, чи варто розглянути варіант SSG + CSR? суто для того щоб подружити звичайний CSR додаток з пошуковим роботом, не переплачувати за сервер і не розбиратись в next.js? Важко знайти матеріал на цю тему
CSR у вас завжди буде, якщо хочете щоб JS працював на клієнті і можна було щось робити. Вся суть реакту - ми отримуємо інтерактивність на клієнті. Реакт не може з коробки видати готовий HTML для пошукових систем, тому тут в гру вступає SSR або SSG. Відрізняється лише моментом коли генерується сторінка. SSR - під час запиту на сервер, SSG - генерація під час білда. Тому працювати буде.
Гарне, корисне відео. Але! Балакаючі голови з точки зору юзер експіріенс це важко. Додавайте, будь ласка, якісь слайди з булетами Вашого відео, так буде значно зручніше, легше сприймати і запам'ятовувати
Дякую! Я чому у вас блог на вордпресі? Якщо через нього зручно публікувати пости, то мені здається можна було зробити тему для Вордпрес на Реакті? Чи як?
Все впирається в час. Вордпрес ідеальне рішення коли потрібно зробити щось швидко. В мене на той момент не було часу пиляти щось складне, яке потрібно самому підтримувати чи якось складно налаштовувати. А зараз і потреби в тому нема. Сайт є, та й цього достатньо, я все рівно ним зараз практично не займаюсь.
Тобто в реакті за замовчуванням стоіть клієнт-сайд-рендерінг, за яким при першому заході на сайт грузиться весь джаваскріпт до браузера клієнта, вірно я зрозумів? Після відкриття першої сторінки реакт застосунку взаємодія з вервером повністю закінчується?
Реакт - це лише JavaScript бібліотечка. Все що вона може це робити красивий інтерактивний UI. Тому він і працює лише з Client-Side. Так, коли ми завантажуємо сторінку вся взаємодія з сервером припиняється.
@@MaksymRudnyi дякую
Дякую, який софт порадите для SSG великої кількості сторінок?
Гляньте на gohugo.io/
Чи можливо/доцільно комбінувати CSR і SSR?
цілком. Сторінки для яких важливе SEO реалізуються з підтримкою SSR, для інших - лише CSR. Наприклад, якщо є сторінки доступ до яких можливий лише авторизованим користувачам - там немає сенсу робити SSR.
але з деплоєм проектів на Next.JS біда( Просто забілдити в айдішці не міг( На поміч приходила тільки Vercel в парі з GitHub (
Тому приєднююсь до коментарів нижче, контент по Next.JS чекаємо з нетерпінням!!!)
P.S. якщо щось, я тільки вчусь)
як на мене забагато води і балаканини в цілому, простіше сприймалась би інформація якби були наприклад схеми намальовані. Але мене вистачило на 10 хв відео, тому що було далі - не знаю
Погоджуюсь, можна було б додати кілька схем.