Майбутнє веброзробки - React Server Components
Вставка
- Опубліковано 11 лип 2024
- Цей же матеріал, але у форматі статті на #DOU - dou.ua/forums/topic/46138/ Приємного читання.
Збір на комплектуючі дла FPV send.monobank.ua/jar/4bswcvxgTZ
Стати спонсором каналу:
/ @maksymrudnyi
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 5363 5426 0316 4386
00:00 Привіт
00:17 Про автора
01:27 Знайомство з серверними компонентами
04:03 Зміст даного відео
04:33 Що реалізовують серверні компоненти
06:20 Продуктивність
08:24 Клієнтський рендеринг
09:15 Спрощений Серверний рендеринг
10:28 Серверний рендеринг SSR
11:33 Порівняння серверних компонентів та SSR
12:11 Недоліки серверного рендерингу
13:28 Bundle size
15:17 Data fetch
16:19 Практика
21:05 Створення серверних компонентів
24:32 Основна особливість серверних компонентів
26:26 Ніяких useState та useEffect
26:52 Створення клієнтських компонентів
27:33 Нова термінологія
29:01 Порівняння Bundle size
32:03 Pages Router приклад
37:41 Що далі?
39:07 Висновки
Давайте дружити:
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 #javascript #реакт #webdevelopment #ReactServerComponents - Наука та технологія
Цей же матеріал, але у форматі статті на #DOU - dou.ua/forums/topic/46138/ Приємного читання. Там багато коментарів досвідчених (і не дуже) розробників. Може бути цікава інша думка.
Дуже круто, автор розглядає майбутнє веб розробки з використанням React Server Components.React Server Components є потужним інструментом, який відкриває нові можливості для оптимізації веб-додатків та поліпшення їх продуктивності. Чекаємо з нетерпінням курс. респект автору 🚀
Дякую за приємний, змістовний та корисний коментар. Працюю над ідеєю курсу.
Можете стати патроном мого каналу, або платним підписником на UA-cam. Коштуватиме менше, а користі безмежно багато.
Дякую за цікавий матеріал ❤
Сподіваюсь даний матеріал виявиться дуже корисним.
Дякую! Нарешті україномовний крутий контент.
Будь ласка. Я, до речі, даний канал уже 3 роки веду, тому "нарешті" це напевно до того що знайшли мене))
Дякую за відео, курс по Next.js від вас дуже потрібен, ви чудовий ментор
Дякую. Дуже приємно чути. Розглядаю зараз можливість створення даного курсу. Як у Вас з TypeScript? Чи потрібно ще по ньому робити оглядове відео чи міні курс?
@@MaksymRudnyi TypeScript якраз у процесі вивчення, треба практикуватися. Відео було б добре якесь з порадами, що треба строго типізувати, а що ні, які тут є граблі і т. д.
Дякую, за цікавий матеріал, не завжди є час самому у всьому розібратися.
Радий допомогти. Тема дійсно цікава, сам хотів в ній краще розібратися.
Дякую за контент. #javascript #webdevelopment #React #ServerComponents #Server #Components #free
Дякую за коментар. Він допоможе побачити дане відео більшій кількості людей.
круто було б якщо зʼявився курс по next.js
Розглядаю даний варіант. Чи потрібен міні курс по TypeScript? Некст буде все рівно на ньому.
@@MaksymRudnyi Якщо стосовно мене, то мені не потрібен)))
окремий ні , краще робити некст або ще шось і покривати тайпскріптом на фоні@@MaksymRudnyi
Супер, курс RSC був би дуже корисним.
Дякую. Розглядаю зараз можливість створення даного курсу. Як у Вас з TypeScript? Чи потрібно ще по ньому робити оглядове відео чи міні курс?
відео круте) так створіть будь-ласка курс
Дякую. Дуже приємно чути. Як у Вас з TypeScript? Чи потрібно ще по ньому робити оглядове відео чи міні курс?
@@MaksymRudnyi міні курс можна) Але більше на разі цікавить ecommerce app який вирішує проблеми з seo)
Дякую за чудове відео. Хотілось би уточнити при підході SSR на сервері рендериться весь додаток(тобто наприклад в мене додаток з 5 сторінок)? але з сервера ми отримуємо html тільки однієї сторінки і js для того щоб додаток став працювати як spa тобто при переході на інші сторінки нова html не приходить?
Дякую. Якщо бути точним то весь додаток генерується при SSG. При серверному рендерінгу генерується лише сторінка на яку був запит. Потім на клієнті відбувається процедура 'гідрації' і Реакт починає працювати як зазвичай. При переходах між сторінками уже нема сенсу витягувати новий html оскільки майже все уже на клієнті і Реакт працює. Звісно є нюанси з серверними компонентами, вони будуть повертатися з сервера, але там не html а JSON.
@@MaksymRudnyi а яким чином краулери зчитують інформацію з кожної сторінки - тобто сторінки все таки є на сервері, бо по іншому як краулери мають доступ до сторінок?тей факт те що отримуємо одну html сторінку я зрозумів
Є кілька способів. Найпростіший, завантажив краулер сторінку а на ній посилання на інші сторінки. От він по них і хадить, кожну завантажує рекурсивно доки не вичерпає бюджет на сканування сторінок. Другий варіант - robots.txt. Це обов'язковий файл для зчитуванннями ботами. Там правила описані і список сторінок на які можна заходити і не можна. Там має бути посилання на sitemap.xm (тут назви уже можуть відрізнятися) і в цьому файлі або файлах ( їх може бути багато) уже є посилання на всі сторінки.
Дякую за відео. Цікаво як архітектурно організувати код в такому підході, щоб це монорепо не перетворилось в неорганізоване звалище серверних та клієнтських компонентів адже тут, мені здається, виникає велика звʼязаність між клієнтом та сервером, бо поки що не бачив на просторах ютубу гарних прикладів, якось цьому мало приділяють уваги, а для серйозних проектів це важливо
Технологія ще не production ready, тому і відео мало, бо мало хто використовує. Звʼязність компонентів з сервером буде, якщо не використовувати мікросервіси для бека, а напряму робити запити в БД. Але тут уже ми повертаємось до MVC або подібних архітектурних патернів, де треба буде розносити логіку роботи з даними і презентацією. Ну або буде якесь інше рішення.