Что такое статические сайты: от 0% JS до продвинутой гидратации

Интернет развивается по спирали. В начале 90-х все сайты были статическими — это были просто HTML-документы, соединенные ссылками. Затем наступила эра баз данных, PHP, WordPress и сложных CMS, когда каждая страница генерировалась на сервере «на лету» в момент запроса. Позже мы пережили бум SPA (Single Page Applications) на базе React и Vue, где бал правил тяжелый клиентский JavaScript, загружаемый в браузер.

И вот, в 2026 году, индустрия снова вернулась к истокам, но уже на новом, высокотехнологичном уровне (эпоха Jamstack 2.0). Статические сайты (Static Site Generation, SSG) — это сегодня де-факто стандарт для блогов, лендингов, документаций, корпоративных порталов и гибридных интернет-магазинов.

В этой статье мы максимально глубоко разберем, что такое статические сайты, почему парадигма «0% JavaScript» стала такой востребованной, как статика разрывает метрики Google PageSpeed (Core Web Vitals), и чем она отличается от гибридного и серверного рендеринга на реальных примерах кода.

Концепт статического сайта: Возвращение к 0% JS

В классическом понимании статический сайт — это набор готовых файлов (HTML, CSS и медиа), которые лежат на хостинге или в CDN (Content Delivery Network). Когда пользователь вводит адрес в браузере, сервер не обращается к базе данных, не запускает сложные PHP/Node.js скрипты для сборки страницы. Он просто берет готовый HTML-файл и мгновенно отдает его.

Современный статический сайт отличается от сайтов из 90-х тем, как именно он создается. Сегодня никто не пишет тысячи HTML-страниц вручную. Для этого используются генераторы статических сайтов (SSG), такие как Astro, Next.js, Eleventy или Hugo. Вы пишете контент в удобном формате (Markdown или MDX), а фреймворк на этапе сборки (build time) прогоняет этот контент через компоненты (React, Vue, Svelte) и генерирует на выходе чистый HTML.

Главная философия современного SSG — это отправка клиенту минимально необходимого кода. Если страница представляет собой просто текст и картинки (например, статья в блоге), нет никакого смысла заставлять браузер пользователя скачивать, парсить и выполнять мегабайты JavaScript-кода (как это делают SPA). Это и называется подходом 0% JS.

Такой подход дает три ключевых преимущества:

Пример: Как выглядит Astro-компонент, который генерирует чистый HTML

Посмотрим на код типичного .astro компонента. Внешне он похож на React или JSX, но его магия заключается в том, что весь JavaScript выполняется только на этапе сборки и полностью удаляется из итогового бандла.

---
// Этот код выполняется ТОЛЬКО на сервере во время сборки (Build Step).
// На клиент не отправится ни строчки из этого блока!
const response = await fetch('https://api.example.com/posts');
const posts = await response.json();
---

<!-- А этот HTML будет сгенерирован и отправлен в браузер -->
<div class="blog-grid">
  <h1>Последние новости</h1>
  <ul>
    {
      posts.map((post) => (
        <li>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))
    }
  </ul>
</div>

В результате браузер получает просто <div>, <h1> и список <ul>. Никаких fetch запросов на клиенте, никаких useEffect или стейтов.

Сравнение подходов к рендерингу (SSG, SSR, CSR, ISR)

Чтобы лучше понять место статических сайтов, давайте сравним их с другими стратегиями рендеринга. В 2026 году архитекторы выбирают не “один фреймворк для всего”, а комбинируют эти стратегии в гибридном рендеринге.

Гибридный рендеринг: объединяя лучшее

Современные фреймворки (Astro 4+, Next.js App Router) позволяют применять разные стратегии рендеринга к разным маршрутам (страницам) в рамках одного проекта.

Например:

• / (Главная страница) -> SSG (максимальная скорость для всех).
• /blog (Блог) -> SSG (отличная индексация статей).
• /products (Каталог товаров) -> ISR (кэшируется, но обновляется раз в час).
• /account (Личный кабинет) -> SSR (персональные данные, нельзя кэшировать).

Что такое гидратация и “Зловещая долина” фронтенда?

Даже на контентном сайте вам часто нужна интерактивность: слайдер изображений, кнопка “Лайк”, выпадающее мобильное меню или форма подписки. Если мы отдаем чистый HTML (0% JS), как сделать страницу живой?

Здесь на сцену выходит концепция Гидратации (Hydration).

Если вы используете React для рендеринга статики (как в Next.js или Gatsby), происходит следующее:

1. Сервер отдает готовый, “сухой” HTML. Пользователь видит страницу мгновенно.
2. В фоновом режиме браузер начинает скачивать тяжелый бандл JavaScript (React + код ваших компонентов).
3. React запускается в браузере, проходит по DOM-дереву и “привязывает” обработчики событий (onClick, onChange) к HTML-элементам.
4. Страница “оживает”. Этот процесс и называется гидратацией.

Проблема: The Uncanny Valley (Зловещая долина)

В промежутке между шагом 1 (пользователь видит страницу) и шагом 4 (React завершил гидратацию) возникает так называемая “зловещая долина”. Пользователь видит кнопку “Купить”, кликает на неё, но ничего не происходит, потому что JavaScript еще не загрузился и не гидратировал этот элемент!

Более того, классические фреймворки гидратируют страницу целиком, сверху вниз. Даже если у вас интерактивна только одна форма в подвале (footer), браузер будет выполнять JS для всей страницы. Это убивает производительность на слабых мобильных устройствах.

Решение 1: Острова Архитектуры (Astro Islands / Partial Hydration)

Astro решил эту проблему с помощью частичной гидратации. Astro генерирует статичный HTML для 95% страницы. А оставшиеся 5% (например, React-форму) он оборачивает в изолированный “Остров”.

---
import Header from '../components/Header.astro'; // Статика (0% JS)
import Footer from '../components/Footer.astro'; // Статика (0% JS)
import InteractiveCarousel from '../components/Carousel.jsx'; // React-компонент
---

<Header />

<main>
  <h1>Наша галерея</h1>
  <!-- JS загрузится и гидратирует компонент ТОЛЬКО когда он появится в области видимости! -->
  <InteractiveCarousel client:visible />
</main>

<Footer />

Благодаря директиве client:visible, Astro отложит загрузку и выполнение JavaScript для карусели до тех пор, пока пользователь не доскроллит до неё. Это революционный подход к экономии ресурсов клиента.

Решение 2: Resumability (Возобновляемость)

Фреймворки нового поколения (например, Qwik) пошли еще дальше. Они полностью отказываются от гидратации в пользу концепции Resumability. Состояние приложения сериализуется прямо в HTML-атрибутах, и при клике загружается только 1 килобайт JS, нужный ровно для обработки этого конкретного клика.

Почему статика рвет Google PageSpeed?

Алгоритмы поисковиков (особенно Google) жестоко наказывают сайты с медленной загрузкой и “прыгающим” интерфейсом. Метрики Core Web Vitals (CWV) — это прямой фактор ранжирования.

SSG сайты выигрывают по всем фронтам:

1. LCP (Largest Contentful Paint). Время отрисовки самого крупного контента (баннера или заголовка). Так как HTML уже готов и отдается из CDN без задержек базы данных, LCP наступает мгновенно.
2. INP (Interaction to Next Paint). Новая метрика 2024+ года, заменившая FID. Она измеряет задержку отклика на клики и ввод текста. Так как статика не загружает “главный поток” (Main Thread) парсингом огромных бандлов JS, браузер всегда свободен для обработки кликов пользователя. INP стремится к нулю.
3. CLS (Cumulative Layout Shift). Сдвиг макета. В SPA страница часто “дергается” при дозагрузке данных по API на клиенте. В статике весь контент уже на месте, картинки имеют заданные размеры, поэтому CLS равен идеальному 0.0.

Итог для бизнеса: 100 баллов в Google PageSpeed — это не просто красивая цифра для программистов. Это снижение показателя отказов (Bounce Rate) на 20-40% и повышение конверсии интернет-магазинов, что напрямую влияет на прибыль.

Индустриальные стандарты SSG-фреймворков

Давайте рассмотрим топовые решения для создания статических и гибридных сайтов на сегодняшний день.

1. Astro.js

Лучший выбор для: блогов, контентных проектов, лендингов, документаций. Его суперсила — концепция «Островов архитектуры» и возможность использовать внутри одного проекта компоненты из React, Vue, Svelte и SolidJS одновременно (фреймворк-агностик). Подробный разбор архитектуры читайте в нашем обзоре Astro.js.

2. Next.js (App Router)

Лучший выбор для: сложных веб-приложений (SaaS), маркетплейсов с авторизацией и личными кабинетами. Мощнейший комбайн в экосистеме React. Хотя он отлично поддерживает SSG, его главная сила — в гибридном роутинге, React Server Components (RSC) и мощном SSR.

3. Eleventy (11ty)

Лучший выбор для: инди-проектов, разработчиков-одиночек, сайтов-портфолио. Любимец “старой школы” фронтенда. Это генератор на базе Node.js, который не заставляет вас использовать React или Vue. Он работает с чистым HTML, Markdown и шаблонизаторами вроде Nunjucks. Максимально простой, быстрый и не подверженный хайпу.

4. Nuxt

Лучший выбор для: enterprise-приложений в экосистеме Vue.js. Аналог Next.js, но для фанатов Vue. Отличается невероятно удобным Developer Experience (DX), потрясающей встроенной системой модулей и превосходным генератором статики (Nuxt Generate).

Часто задаваемые вопросы (FAQ)

Можно ли сделать авторизацию на статическом сайте? Да. Хотя сам контент страницы (SSG) отдается всем пользователям одинаковым, вы можете использовать JWT-токены и клиентский JavaScript для проверки прав пользователя, либо использовать гибридный подход (Astro Hybrid / Next.js Middleware), рендеря закрытые страницы через SSR.

Где хранится база данных в статическом проекте? В классическом SSG роль базы данных играют Markdown (.md или .mdx) файлы прямо в репозитории (Git-based CMS). Если проект крупный, контент тянется по API из Headless CMS (например, Sanity, Strapi или Contentful) только в момент сборки сайта (build time). Подробнее читайте в материале про Headless CMS для Astro.

Как часто нужно пересобирать статический сайт? Каждый раз, когда вы меняете контент (публикуете статью). К счастью, современные CI/CD платформы (Vercel, Netlify) делают это автоматически при пуше в GitHub (через webhooks) всего за несколько секунд. А использование подхода ISR позволяет пересобирать отдельные страницы, не трогая весь сайт.

Резюме

Статические сайты сегодня — это не откат в 90-е годы, а архитектурная эволюция. Возвращение к базовым принципам веба (отдавать чистый HTML), усиленное современными инструментами сборки и доставкой через граничные вычисления (Edge Networks).

Если ваш сайт состоит преимущественно из контента, который читают пользователи, выбор статической архитектуры — это самое надежное решение для SEO, экстремальной производительности и экономии бюджета на сервера. Вы получаете 100/100 в PageSpeed из коробки и безопасность, о которой владельцы классических баз данных могут только мечтать.