SSR vs SSG vs CSR і де тут Next.JS

❓Як з'ясувалося, є деяке нерозуміння що таке і чим відрізняються Client Side Rendering від Server Side Rendering та Static Site Generators.

Відмінність проста, але принципова.

👉 CSR - контент який ви бачите створюється на клієнті (прямо у вашому браузері)
👉 SSR - контент створюється на сервері, прямо під час вашого запиту
👉 SSG - контент створюється лише під час білду і не змінюється до наступного білду.

Відповідно:

1️⃣ CSR - довго, не дружить з SEO, актуальні дані, зручна навігація
2️⃣ SSR - швидше, дружить з SEO, актуальні дані, складніше
3️⃣ SSG - дуже швидко, дружить з SEO, потрібен новий деплой щоб оновити дані.

👉А #NextJS тут до того, що він може працювати в будь-якій моделі, хоча за замовчуванням він працює саме в моделі Server Side Rendering і орієнтований на неї.

👾Цікавий факт, що ми починали з SSG, потім перейшли на SSR, потім на CSR і зараз знову повертаємось до SSR, але з можливостями CSR. Історія, як завжди, йде по спіралі.

@reactbeginners

Інструкція: Як налаштувати #NextJS з нуля - prettier, eslint, jest, автоматизація

❓Хто цікавився як налаштувати Next.JS v13.4 з нуля - прошу ознайомитися з цією інструкцією.

В програмі:

- Prettier
- EsLint
- Автоматизація форматування з husky на commit
- Jest і його автоматизація на push
- Підказки для деплойменту Azure

Мінімум води + готовий код (писав як для себе)

❤️ Буду вдячний за поширення!

@reactbeginners

❗️Зміна форматування файлу next.config.js може призвести до зміни в самому білді #NextJS

❓В задачі питається - ДЕ Я ТАК НАГРІШИВ?

Поки без подробиць, бо ще розбираємось, але схоже на trailing coma.

П.М. Все всім відправлено, чекаємо на звіт.

🔥 Next.JS 14.0🔥

🎉 26 жовтня вийшов мажорний реліз Next.JS v.14. І я вже навіть зібрався зробити на нього відео огляд, але після ознайомлення і деяких експериментів весь огляд можна звести до 🤷‍♂️

Ні, в теорії нові можливості виглядають цікаво:

=> Прискорення на 54% запуску локального серверу та прискорення HMR на 94% (але все ще за прапорцем --turbo)

=> Серверні дії: код який ви можете позначити як такий, що має виконуватися на сервері і оминути процес створення API.

Але на практиці... Прискорення звісно приємна річ, але не критична. А серверні дії ще більше ускладнюють модель застосунку, виглядають як чорна магія та надто обмежені (як на мене)

👉 Єдине що радує це нові навчальні матеріали.

😕 Ось такий вийшов новий мажорний реліз next14, відео огляд якого міг би зайняти 30 секунд.

Всім гарного дня, бережіть себе і допомагайте ЗСУ

@reactbeginners

Вчора вийшли два відео про #NextJs

Хто ще не дивився - подивіться і поставте лайк, бо схоже навіть ютуб Next не любить 😀

CSS - теорія
СSS - практика

Наступне відео буде про роутинг, має бути цікавішим. А практику я думаю зробити по всьому пройденому матеріалу в прямому ефірі.

Всім привіт.

Сьогодні, в понеділок, о 19:00 виходить наступне відео про #NextJS присвячене роутингу. Поговоримо про те як додавати різноманітні види нових сторінок.

А от в середу ввечері у нас буде прямий ефір на якому будемо пробувати все те що ми проходили попередньо - зробимо частину мікроблогу, тож резервуйте час - середа, 19:00.

Цей ефір - кінець першої частини курсу. Лінка буде вже завтра.

Бережіть себе, допомагайте ЗСУ і гарного всім тижня!

Як знайти невикористані експорти в TypeScript проекті

npx ts-prune -p

Вітаю 🎉, ви знайшли знайшли експорти, що або зовсім не використовуються, або використовуються в середині модуля і їм можна прибрати export.

З ростом проекту таке слід робити періодично - дозволяє більш менш безпечно видаляти зайвий код. Ще більш актуально така чистка стає, якщо над проектом працює велика кількість постійно нових людей 😉

З #NextJS буде трохи проблем, використовуйте прапорець -i для того щоб вимкнути перевірку не потрібних файлів (page.tsx, layout.tsx, etc)

Документація тут

@reactbeginners

Прохання підтримати пост і обов'язково приходьте сьогодні, о 19:00.

Буде і цікаво і корисно.

ПМ (міг - впади!)

@reactbeginners

Не беріть #NextJS в адмінку, це погана ідея:

1. Next, в першу чергу, це server side rendering (SSR)
2. SSR це додана складність і часом суттєва (спитайте Влада)
3. SSR адмінці до одного місця не потрібен

Висновок: ви додаєте складність в обмін на ніщо.

Для адмінки беріть щось більше до цього пристосоване - можна чистий React, можна PHP, .NET + Razor. Але не Next, не наступайте на мої граблі, не робіть каку на пустому місці

П.М. На перший погляд ці двері однакові

@reactbeginners

Чекліст перед початком нового #FrontEnd проекту

Мінімальний розмір екрану
Визначаємо мінімальний розмір екрану і верстаємо одразу під нього. Перероблювати потім - дорого і довго. Перевіряємося за допомогою Google Developer Tools

"Найгірший" браузер
Дізнаємося який "найгірший" браузер хоче бачити наш замовник і перевіряємо на ньому. Найгірші в моєму порядку черговості - IE (хвала всім його дропнули), Safari, Firefox. Але може бути вимога щоб працювало в Opera Mini або на якійсь екзотиці, тоді готуйтеся страждати.

#SEO
Якщо потрібно SEO - беремо Server Side Rendering (#NextJs/Remix) або взагалі не React. Перероблювати потім суттєво дорожче. Якщо SEO не потрібно - #SSR брати не варто.

Доступність
Якщо треба то який рівень? Норвегія, США, зазвичай це WCAG AA (перекладено українською) для публічно доступних сторінок. Ставимо wave і перевіряємося постійно. Як варіант - в playwright є можливість писати тести для доступності. Дороблювати потім - неймовірно боляче.

Мультимовність.
Якщо так - налаштовуємо одразу і не хардкодимо тексти, а одразу використовуємо компонент що вміє перекладати (FormattedMessage як приклад).

Ще трохи (швидкодія, безпека) є тут

Складно? Так. Рівень джуна? Ні. Але краще про все це думати одразу і домовлятися на березі, аби потім не було дуже боляче. І не забувайте фіксувати ці домовленості письмово - бо усні домовленості люди чомусь "забувають".

Всім добра, допомагайте ЗСУ
@reactbeginners