Astro
Тема дорожной карты · Frontend разработчик
Astro — это современный веб-фреймворк, построенный вокруг концепции «островной архитектуры» (islands architecture): большая часть страницы рендерится как статический HTML во время сборки (SSG), и только интерактивные UI-острова гидрируются JavaScript, что обеспечивает минимальную отправку JS по умолчанию. SSR с Astro включается заданием output: 'server' или output: 'hybrid' в astro.config.mjs и добавлением серверного адаптера (например @astrojs/node, @astrojs/vercel), после чего .astro-страницы могут читать заголовки запросов, куки и переменные окружения во время выполнения. Островная модель Astro позволяет смешивать компоненты React, Vue, Svelte или Solid на одной странице с помощью клиентских директив client:load, client:idle и client:visible для управления моментом гидрации, что напрямую улучшает Core Web Vitals за счёт откладывания выполнения JavaScript. SSR с Astro особенно эффективен для контентных сайтов и платформ документации, где большая часть контента статична, но отдельные компоненты — виджеты поиска, корзины, UI аутентификации — требуют клиентской интерактивности.
Как это работает
Astro рендерят React/Vue/Svelte на сервере, шлют HTML в браузер, гидратируют JavaScript для интерактивности. Next.js (React, App Router с Server Components) — доминирующий выбор; Remix (теперь React Router 7) делает упор на data loaders; Astro — islands-архитектура (в основном статика, гидратация выборочно); Nuxt для Vue; SvelteKit для Svelte; Qwik для resumability. Варианты: SSR (per-request), SSG (на сборке), ISR (периодическая ревалидация), edge rendering (ближе к юзеру).
Когда применять
SSR/SSG — когда важен SEO (блог, маркетинг, продуктовые страницы) или начальный HTML должен быть полезен до JS. Astro — для контент-first сайтов с в основном статикой. Next.js (App Router) — для full-stack React-приложений с микс SSR/SSG/CSR-нужд. Обычная SPA — когда SEO не важен (внутренние тулы, дашборды за auth).
Типичные ошибки
Ловушки Astro: browser-only API (window, localStorage) в компонентах, рендерящихся на сервере (краш — оборачивайте typeof window !== "undefined" или переносите в client-only); hydration mismatches (HTML сервера ≠ client render); огромные payload через getServerSideProps/loader убивают SSR-выигрыш; нет cache-заголовков на динамических маршрутах. Прочтите доки фреймворка про кеширование один раз.