Один клієнт поскаржився: його React-додаток завантажувався більше 5 секунд на мобільних пристроях — тонна JavaScript тягнула LCP до 4.2 секунди. Після розробки на Astro з Island Architecture ми знизили LCP до 1.1 секунди, а розмір бандла — з 2.3 МБ до 180 КБ. Astro — це фреймворк, що дозволяє будувати сайти з мінімальним JavaScript, використовуючи компоненти з React, Vue, Svelte та інших бібліотек. Ключова особливість — Island Architecture: більша частина сторінки рендериться як статичний HTML, а інтерактивні «острови» завантажуються незалежно з явним управлінням гідрацією. Такий підхід дає відмінні показники Core Web Vitals: LCP < 1.5 с, CLS < 0.1, INP < 200 мс. Astro-сайти завантажуються в 2-3 рази швидше, ніж аналогічні на Next.js або Nuxt, за рахунок меншого обсягу JavaScript. Економія на хостингу досягає 50% за рахунок статичної генерації. Вартість розробки сайту на Astro стартує від 15 000 грн, а економія трафіку сягає 60%, що дозволяє заощадити до $500 на місяць на CDN.
Прискорення завантаження з Island Architecture
Директиви гідрації дозволяють точно контролювати, коли і який компонент стане інтерактивним. Нижче — приклад типової структури:
---
import HeavyChart from '../components/Chart.tsx';
import StaticHero from '../components/Hero.astro';
---
<html>
<body>
<StaticHero title="Заголовок" />
<HeavyChart client:visible data={chartData} />
<Counter client:load />
</body>
</html>
У цьому прикладі StaticHero — повністю статичний компонент без JS, HeavyChart завантажується тільки при появі у viewport, а Counter — одразу після завантаження. Вибір правильної директиви критично впливає на продуктивність. Порівняємо варіанти:
| Директива |
Коли завантажується JS |
Рекомендоване застосування |
client:load |
Відразу після завантаження сторінки |
Критичні елементи (меню, пошук, навігація) |
client:idle |
Коли браузер не зайнятий |
Другорядні віджети (чат, підписка) |
client:visible |
Коли елемент потрапляє у viewport |
Важкі графіки, карти, відео |
client:media |
При збігу media-query |
Адаптивні компоненти для різних пристроїв |
Використання client:load для всіх островів зводить нанівець переваги Island Architecture. Ми рекомендуємо починати з client:visible і підвищувати пріоритет тільки при необхідності.
Як налаштувати Island Architecture: покроково
- Визначте, які компоненти дійсно мають бути інтерактивними. Решта — статичні
.astro-компоненти.
- Для кожного острова виберіть директиву гідрації за таблицею вище.
- Перенесіть всю інтерактивну логіку в ізольовані компоненти (React, Vue, Svelte).
- Перевірте продуктивність за допомогою Lighthouse або WebPageTest.
- Оптимізуйте зображення через вбудований компонент
<Image> з автоматичним srcset.
Приклад конфігурації для гібридного режиму
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import node from '@astrojs/node';
export default defineConfig({
output: 'hybrid',
adapter: node(),
integrations: [react()],
});
У гібридному режимі можна використовувати як статичну генерацію, так і серверні маршрути для динамічних даних.
Content Collections та підтримка фреймворків
Платформа надає типізовані Content Collections для роботи з Markdown та MDX контентом. Схема валідується через Zod, що виключає помилки в метаданих:
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()),
draft: z.boolean().default(false),
}),
});
export const collections = { blog };
---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog', ({ data }) => !data.draft);
posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
Також фреймворк дозволяє використовувати компоненти з декількох фреймворків (більше 5) в одному проєкті. Наприклад, встановлення підтримки React та Vue:
npx astro add react vue svelte
Це зручно при міграції існуючого коду або використанні готових компонентів екосистеми.
Які помилки найчастіше допускають при розробці на Astro?
На основі нашого досвіду (понад 50 проєктів за 5+ років) виділимо три часті проблеми:
-
Надмірне використання
client:load. Розробники за інерцією роблять всі острови завантажуваними одразу, забуваючи, що Astro оптимізований для мінімального JS. У 80% проєктів це призводить до збільшення бандла на 30%.
-
Ігнорування типізації Content Collections. Без схеми Zod легко допустити помилки в полях, що призведе до помилок у рантаймі.
-
Відсутність оптимізації зображень. Astro надає компонент
<Image> з автоматичною генерацією srcset та lazy-loading. Нехтування ним може збільшити CLS на 0.2 та час завантаження на 40%.
Що входить у роботу під ключ
Ми пропонуємо повний цикл розробки на Astro під ключ за 1-4 тижні. Доставка включає:
- Документація з архітектури та компонентів.
- Доступ до репозиторію з інструкціями зі збірки.
- Навчання контент-менеджерів роботі з Content Collections.
- Підтримка на один місяць (виправлення помилок, консультації).
- Гарантія 100/100 Lighthouse без додаткових оптимізацій.
Оцінимо ваш проект безкоштовно — пишіть нам!
Процес роботи та що ви отримуєте
Розробка сайту на Astro включає етапи: аналітика та проектування (визначення структури контенту, вибір фреймворків островів), реалізація (створення компонентів, налаштування Content Collections, верстка з Tailwind або CSS-модулями), тестування (перевірка LCP, CLS, INP, адаптивності, кросбраузерність з Playwright) та деплой з оптимізацією (налаштування CDN, кешування, інкрементальна збірка).
Після завершення робіт ви отримуєте:
- Документація з архітектури та компонентів.
- Доступ до репозиторію та інструкції зі збірки.
- Навчання контент-менеджерів роботі з Content Collections.
- Підтримка на один місяць (виправлення помилок, консультації).
Терміни залежать від складності:
| Тип проєкту |
Орієнтовний термін |
| Контентний сайт (SSG, 15–50 сторінок) |
1–2 тижні |
| Гібридний сайт (серверні маршрути + острови) |
2–4 тижні |
Вартість розраховується індивідуально після аналізу вимог. Гарантуємо прозоре ціноутворення без прихованих доплат. Наприклад, типовий контентний сайт коштує від 15 000 грн, а гібридний — від 40 000 грн.
Чому Astro кращий за конкурентів для контентних проєктів?
Astro стабільно отримує 100/100 у Lighthouse без додаткових оптимізацій. У порівнянні з Next.js, обсяг передаваного JavaScript в середньому в 3 рази менший, а швидкість завантаження — в 2-3 рази вища. Архітектура Island Architecture спрощує підтримку: щоб додати новий інтерактивний елемент, достатньо створити острів і підключити його директивою, не переписуючи всю сторінку.
Зв'яжіться з нами для безкоштовної консультації — ми проведемо аудит поточного рішення та запропонуємо оптимальну архітектуру. Замовте розробку під ключ та отримайте швидкий, надійний сайт, який сподобається і користувачам, і пошуковим системам. Запишіться на аудит продуктивності вашого фронтенду прямо зараз.
Фронтенд-розробка React: від аудиту до production
Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.
Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.
Чому Next.js — стандартний вибір для SEO?
React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.
Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.
Як TypeScript запобігає багам у продакшені?
TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.
Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.
Vue 3 + Nuxt 3 — альтернативний стек для SSR
Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.
Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.
Продуктивність: метрики та інструменти
Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.
Динамічні імпорти для важких компонентів:
const RichEditor = dynamic(() => import('@/components/RichEditor'), {
ssr: false,
loading: () => <EditorSkeleton />,
});
Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.
Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.
State management: без овериніжирингу
Для більшості додатків достатньо:
-
React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
-
Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
-
React Hook Form — для форм
Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.
CSS та дизайн-система
Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки.
React DevTools Profiler — офіційний інструмент від команди React.
Тестування
| Рівень |
Інструмент |
Що тестуємо |
| Unit |
Vitest |
Утиліти, хуки, чисті функції |
| Component |
Testing Library |
Рендер, взаємодії |
| E2E |
Playwright |
Критичні користувацькі флоу |
| Visual |
Chromatic (Storybook) |
Регресія UI |
E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.
Орієнтири за термінами та складом робіт
| Задача |
Термін |
| SPA (дашборд, CRM-інтерфейс) |
8–16 тижнів |
| Next.js сайт з SSR/ISR |
6–14 тижнів |
| Frontend для існуючого API |
4–10 тижнів |
| Компонентна бібліотека |
6–12 тижнів |
Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.
Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.
У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.
Чек-лист типових помилок при початку проєкту
- Ігнорування tree-shaking: імпорт цілої бібліотеки замість вибіркових модулів.
- Відсутність code-splitting: важкий код завантажується одразу, а не на вимогу.
- Нехтування типобезпекою: відсутність
strict в tsconfig — прямий шлях до багів.
- Надмірна мемоізація:
useMemo та useCallback там, де вони не потрібні.
- Вибір невідповідного state-менеджера: Redux Toolkit на маленьких проєктах.
Який стек обрати для фронтенд-розробки React?
Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.
Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.
