Статическая генерация сайтов

Preact — это лёгкая альтернатива React, обеспечивающая высокую производительность при минимальном размере библиотеки. Одним из ключевых подходов при работе с Preact является статическая генерация сайтов (Static Site Generation, SSG), которая позволяет заранее создавать HTML-страницы на этапе сборки, уменьшая нагрузку на клиент и ускоряя загрузку страниц.

Основы статической генерации

Статическая генерация заключается в формировании готовых HTML-файлов во время сборки проекта. В отличие от классического рендеринга на клиенте, где весь контент генерируется в браузере, SSG позволяет серверу или сборочному инструменту подготовить страницы заранее. Это приводит к следующим преимуществам:

  • Высокая скорость загрузки: пользователю сразу отдаётся полностью сформированная страница.
  • SEO-оптимизация: поисковые системы получают готовый HTML, что улучшает индексацию.
  • Надёжность: отсутствие зависимости от серверной логики в момент запроса пользователя.

В Preact статическая генерация часто используется вместе с инструментами вроде Preact CLI, Vite, Astro или Eleventy, которые обеспечивают сборку проекта и создание статических HTML-файлов.

Использование Preact CLI для SSG

Preact CLI предоставляет встроенные возможности для генерации статических страниц. Ключевые этапы процесса:

  1. Создание проекта:
npx preact-cli create default my-project
cd my-project

  1. Структура страниц: Файлы в папке src/routes автоматически превращаются в маршруты. Например, src/routes/about.js станет страницей /about.

  2. Добавление контента: Компоненты Preact используют JSX для описания разметки:

import { h } from 'preact';

export default function About() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Это пример статически сгенерированной страницы на Preact.</p>
    </div>
  );
}
  1. Сборка статического сайта:
npm run build

После выполнения команды создаётся папка build, содержащая готовые HTML-файлы для каждой страницы. Эти файлы можно разместить на любом статическом хостинге.

Динамические данные и SSG

Preact поддерживает генерацию страниц с динамическими данными, загружаемыми во время сборки. Например, можно использовать API для получения списка постов и рендерить их как отдельные страницы:

// src/routes/posts.js
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

export default function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Посты</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

В данном случае данные загружаются на клиенте после загрузки страницы. Для полностью статической генерации можно использовать генерацию страниц на этапе сборки, извлекая данные заранее и создавая HTML напрямую.

Преимущества Preact при SSG

  • Минимальный размер: библиотека Preact весит около 3 КБ, что ускоряет загрузку страниц.
  • Совместимость с React: большинство компонентов React можно адаптировать для Preact.
  • Высокая производительность: статический рендеринг вместе с Preact обеспечивает быстрый Time to Interactive (TTI).
  • Поддержка гидратации: Preact позволяет «оживлять» статические HTML-страницы, добавляя интерактивность на клиенте без полной перерисовки.

Интеграция с современными сборщиками

Использование Vite и Astro позволяет комбинировать Preact с SSG более гибко. Пример настройки Astro:

---
// src/pages/index.astro
import MyComponent from '../components/MyComponent.jsx';
const posts = await fetch('https://jsonplaceholder.typicode.com/posts')
  .then(res => res.json());
---

<html>
  <body>
    <MyComponent posts={posts} />
  </body>
</html>

В этом подходе данные загружаются на этапе сборки, а результат отдаётся как готовый HTML. Preact-компоненты гидратируются на клиенте для интерактивности.

Рекомендации по оптимизации

  • Минимизировать использование больших библиотек и тяжелых зависимостей.
  • Стараться загружать данные на этапе сборки, а не динамически на клиенте.
  • Использовать lazy и Suspense для отложенной загрузки компонентов, чтобы уменьшить initial bundle size.
  • Кэшировать результаты API-запросов на этапе сборки, если данные не меняются часто.

Заключение по возможностям SSG с Preact

Preact в сочетании с SSG позволяет создавать быстрые, лёгкие и SEO-оптимизированные сайты. Поддержка гидратации и совместимость с React-компонентами делают Preact идеальным инструментом для проектов, где критична скорость загрузки и размер финального бандла. Правильная интеграция с современными сборщиками позволяет строить масштабируемые приложения с высокой интерактивностью без компромиссов по производительности.

Оглавление