#008 — CSP + React+Vite vs Next.js
Дата: 3 липня 2026 | 19:00 London / 21:00 Kyiv
Формат: Дві доповіді · ~80–95 хвилин
Гість: Олександр Блажейко
YouTube: https://youtube.com/live/txdVcK2Sxno
Учасники
Олег Левченко — Senior Full Stack JavaScript Developer (React / Node.js / AWS)
The AA · Cardiff, UK
YouTube @zloyleva · itfriday.community
Олександр Блажейко — Software Development Engineer · Fullstack, 7+ років досвіду
Україна
LinkedIn · itvibe.party
Ключові тези
Доповідь 1 — Content Security Policy (CSP) · Олександр Блажейко
- CSP — стандарт безпеки: розробник задає, з яких джерел браузеру дозволено завантажувати ресурси (скрипти, стилі, зображення, фрейми) — білий список: дозволено лише явно вказане
- Навіщо — нейтралізує наслідки XSS: навіть якщо зловмисник вставив скрипт, браузер не виконає його через заборонене джерело; також захищає від Clickjacking через
frame-ancestors - XSS-атаки — reflected (параметр з URL без екранування потрапляє в HTML) і stored (шкідливий контент збережено в БД і показується всім користувачам)
- XSS при гідратації SSR — стан серіалізується у JSON і вставляється в inline-скрипт; неекрановані дані — вектор XSS через передчасне закриття
</script> - Директиви —
default-src(резервне правило),script-src(найважливіша проти XSS),style-src,img-src,connect-src,frame-ancestors,base-uri - nonce vs hash замість
unsafe-inline— nonce — випадковий токен на кожен запит; hash — SHA-хеш вмісту inline-скрипта - Report-Only —
Content-Security-Policy-Report-Onlyлогує порушення без блокування — спосіб безпечно впровадити CSP без ризику зламати прод - Типові помилки — залишати
'unsafe-inline'"щоб працювало", використовувати*, вмикати блокування одразу на проді без Report-Only-етапу, покладатись лише на CSP без санітизації вводу - CSP vs CORS — CSP обмежує що сторінка може завантажити й виконати (задає сервер сторінки), CORS дозволяє читати відповідь з іншого origin (задає сервер ресурсу)
Доповідь 2 — React+Vite vs Next.js · Олег Левченко
- Vite — build tool + dev-server, швидкий HMR (esbuild у dev, Rollup у build); не диктує routing, rendering чи структуру проєкту — "просто React" зі швидким тулінгом навколо
- Next.js — full framework: routing, rendering-стратегії, API routes, оптимізації (зображення, шрифти) — з коробки
- Rendering — Vite за замовчуванням CSR (класичний SPA); Next.js — SSR/SSG/ISR з коробки; впливає на SEO, перший контентний рендер (FCP) і продуктивність на слабких пристроях
- Routing — у Vite сам підключаєш
react-routerі будуєш структуру; у Next.js — файлова маршрутизація (app/), роут = папка/файл - Dev experience — Vite dev-server дає миттєвий HMR з мінімальним оверхедом; Turbopack у Next.js наздогнав за швидкістю, але сама модель складніша (server/client components, кешування)
- Деплой — Vite — статичний білд, будь-який хостинг (GitHub Pages, Netlify, S3+CloudFront); Next.js найкраще на Vercel "з коробки", self-host вимагає Node-сервера для SSR/ISR
- Коли обирати Vite — SPA, внутрішній інструмент, дашборд, прототип, коли SEO не критичний і хочеться повного контролю над стеком
- Коли обирати Next.js — публічний продукт де важливий SEO/перший рендер, потрібні SSR/ISR з коробки, команда готова прийняти складнішу модель рендерингу
Таймкоди
Будуть додані після стріму.