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

Цей тиждень буде дуже насиченим.

1. Вже сьогодні, о 19:00 виходить нове відео: Next.JS та побудова API. Десять хвилин але дуже насичені та корисні.
2. В цей четвер, о 19:00, разом з @FwDays буде войс чат про ідеальний фреймворк і чи є #NextJS таким. Без спойлерів)
3. В суботу (а що робити) буде прямий ефір про API в Next.JS під кодовою назвою - як розпарсити монобанку. (лінка пізніше)

Сподіваюся буде корисно, бережіть себе та допомагайте ЗСУ,
@reactbeginners

Відео про Next.JS та API вже доступне для перегляду

План:

- Навіщо нам API
- Як будується раутинг для API
- Як отримати параметри запиту
- Як відповісти на запит
- Та про деякі нюанси використання API в #NextJS

Єдиний мінус - схоже я знову зі звуком облажався, хоч плач(

Тим не менше, як бачите - я не тільки з вас гроші прошу, а ще й щось корисне роблю 🙂До речі, обіцяний приклад з тестування контексту вже готовий, буде теж сьогодні.

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

@reactbeginners

Обіцяне посилання на сьогоднішній ефір про #NextJS, API та монобанк який відбудеться вже сьогодні о 19:00.

Ставте нагадування, беріть чоловіків, жінок, котів, собак, єнотів і приходьте (павуків не беріть 😂). Має бути цікаво і сподіваюся монобанк мене не забанить після цього ефіру)

Почуємось о 19:00!

Пост був змінений в зв'язку з помилкою в обкладинці. Все в силі.

Зібрав відео з курсу #NextJS (відео манюні, можна дивитися за кавою)

1. Next.JS - що це таке і чим відрізняється від React
2. NextJs - створюємо свій перший застосунок [Практика]
3. NextJs, компоненти та їх види
4. NextJs, компоненти та їх види (Практика)
5. NextJS та справжні клієнтські компоненти
6. NextJs та стилізація - CSS, CSS Modules, SCSS, CSS in JS
7. Next.JS та Клієнтський роутинг
8. NextJS - клієнтська частина від А до Я прямий ефір, велике відео
9. NextJs та API
10. Next.JS, API, та Monobank прямий ефір, велике відео

Весь плейліст

@reactbeginners

Продовжуємо серію про налаштування #frontend проекту і тепер потурбуємося про #websecurity.

1. Перевірте, що файл .env.local або його аналог не доданй під git. Так ваші паролі або токени не потраплять в мережу, а ви не отримаєте додаткові рахунки. Всі ключі/токени/паролі які ви використовуються мають зберігатися окремо або в key vault, або хоча б на білд машині яка готує реліз.

2. Налаштуйте перевірку ваших залежностей за допомогою команди npm audit. Ця команда покаже вам пакети, що містять вразливості та допоможе оновити їх щоб це виправити. Для того щоб було менше false positive спрацювань:
- - Перенесіть в dev секцію вашого package.json файлу всі залежності що стосуються розробки - prettier, eslint, jest, і т.д.
- - Використовуйте npm audit з прапорцем --production або --omit=dev.
- - Передайте привіт create-react-app :)

Гарною ідеєю буде інтегрувати цю перевірку в merge фазу пулл реквесту. Або раніше якщо не хочеться все перероблювати :)

3. Безпека runtime. Через особливість налаштування, частіше цим займається команда інфраструктури або бекенду, але частково це можемо налаштувати і ми. Особливо якщо у нас щось накшталт #nextjs

Мова йде про основні безпекові заголовки - Content-Security-Policy (CSP), X-Content-Type-Options, Feature-Policy. А якщо ви ще й піклуєтеся про приватність ваших користувачів то й Referrer-Policy. В разі правильного застосування, за заголовки можуть запобігти або суттєво зменшити шкоду користувачам вашої веб сторінки.

Детальніше про ці заголовки та як їх налаштовувати я розповім в наступному пості, бо лонгріди ж ніхто не читає)

Ваш ЗамПоМиш.

П.М. Ви тут як? Бо останнім часом такий цирк на дроті що голова обертом.