Зміст
Відкриваєш щотижневу замітку. Текст стоїть на місці. Браузер тим часом розпаковує цілу майстерню: каркас застосунку, бібліотеку інтерфейсу і два набори анімацій. Близько 230 кілобайт програми — щоб показати абзаци.
На Dev.to розробник розповів, як цю майстерню прибрав. Особистий сайт переїхав з Next.js 15 (React 19, Framer Motion, GSAP) на Astro 6. Сторінка допису перестала відправляти в браузер зайву програму.
Бензопила біля масла
Перша версія була вітриною. Анімації, два режими оформлення, текст через content-collections, next-mdx-remote, react-markdown і starry-night. Потім робота стала іншою: замітка раз на тиждень. Інструменти лишилися увімкненими. Приблизно 180 КБ каркаса, 45 КБ React, 60 КБ Framer Motion і 30 КБ GSAP — заради тексту, який не рухається.
Next.js уміє зібрати сторінку заздалегідь. Це не вимикає верстат. Браузер усе одно стягує програму, розбирає її і запускає знову, щоб намалювати ті самі абзаци й блоки коду.
Хліб уже нарізаний, а пила на столі гуде.
Сторінка приїжджає вже намазаною
Astro за замовчуванням віддає готову сторінку: розмітку і стилі. Програма прокидається лише там, де хтось має натиснути. На всьому сайті таким мотором лишився короткий вбудований скрипт перемикача темної теми.
Переїзд зайняв близько дня. Дописи на MDX скопіювали. Tailwind v4 і теми залишили. Підсвічування коду віддали вбудованому Shiki замість starry-night. Плавну зміну екранів віддали самому браузеру (View Transitions), без Framer Motion.
Рідкісну кнопку можна лишити острівцем: віджет на React з client:load. Збірки матеріалів і Shiki закривають близько 80% такого блогу без колишнього ланцюжка обробників.
Пилу беруть, коли ріжуть не масло
Суперечка «Astro чи Next.js назавжди» промахується. Питання в тому, що лежить на тарілці.
| Що робите | Чим користуватися |
|---|---|
| Сервіс, кабінет, крамниця — екран увесь час відповідає | Next.js і повноцінний React |
| Блог і документація — сторінку переважно читають | Astro і подібні інструменти: у браузер їде сторінка, а не застосунок |
Цифри з тієї самої розповіді. Оцінка швидкості в Lighthouse: з 85–90 до 99–100. Збірка: з ~15 секунд до ~5. Залежностей: з 30 з гаком до ~10.
Старий сайт на Next.js можна лишити архівом. Автор сам віддав плавну перебудову макета в обмін на швидкість, з якою виходить нова замітка. Вітрину не обов’язково спалювати того ж дня.
Що перевірити на своєму блозі
- Відкрийте звичайну статтю і подивіться, скільки програми тягне браузер. Якщо там лише текст і підсвічування коду, застосунок, найімовірніше, зайвий.
- Рідкісну кнопку лишіть окремим острівцем. Не вмикайте заради неї всю майстерню.
- Не викидайте «шоу» портфоліо лише тому, що блогу воно не потрібне. Це різна робота.
- Стару версію можна не видаляти того ж дня.
Якщо головна робота тижня — віддати людині сторінку тексту, не заводьте бензопилу.
Коментарі