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

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

В Svelte для реализации статической генерации используется специальный инструмент — SvelteKit. Этот фреймворк значительно расширяет возможности Svelte, включая поддержку маршрутизации, серверной и клиентской логики, а также статической генерации.

Основы SvelteKit

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

Для создания нового проекта с использованием SvelteKit можно выполнить команду:

npm create svelte@next my-app

После установки и настройки проекта можно приступать к созданию статических страниц.

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

В SvelteKit статическая генерация происходит в процессе сборки проекта. Все страницы и маршруты, которые должны быть статически сгенерированы, создаются заранее в момент сборки. Статические страницы генерируются в формате HTML и могут быть сразу развернуты на сервере или хостинге, который поддерживает статическую раздачу файлов, например, Vercel или Netlify.

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

Пример маршрута для статической страницы:

// src/routes/index.svelte
<script context="module" lang="ts">
  export async function load() {
    return {
      props: {
        message: 'Hello, SvelteKit!',
      },
    };
  }
</script>

<h1>{message}</h1>

В этом примере используется метод load(), который выполняет загрузку данных до рендеринга страницы. В случае статической генерации SvelteKit выполнит этот код во время сборки, а не на сервере или клиенте, генерируя статический HTML.

Сборка проекта

После того как страницы настроены для статической генерации, нужно выполнить сборку проекта. Это делается с помощью команды:

npm run build

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

Настройки статической генерации

SvelteKit предоставляет возможность управлять поведением статической генерации с помощью различных настроек. Одним из самых важных аспектов является настройка методов рендеринга для отдельных маршрутов.

prerender в load()-методе

Метод load() используется для предварительной загрузки данных для страницы. В SvelteKit можно указать, должен ли маршрут быть предварительно отрендерен на этапе сборки, с помощью параметра prerender:

// src/routes/about.svelte
<script context="module" lang="ts">
  export async function load() {
    return {
      props: {
        title: 'About Us',
      },
      prerender: true,
    };
  }
</script>

<h1>{title}</h1>

Параметр prerender: true гарантирует, что эта страница будет сгенерирована на этапе сборки и будет доступна как статическая.

Динамические маршруты и генерация статических страниц

В случае динамических маршрутов, например, для блога с постами или галереей, где контент зависит от данных, статическая генерация все равно возможна. В SvelteKit можно использовать функции load() и prerender, чтобы генерировать страницы для динамических маршрутов.

Пример маршрута с динамическим параметром:

// src/routes/posts/[slug].svelte
<script context="module" lang="ts">
  export async function load({ params }) {
    const { slug } = params;
    const post = await fetchPost(slug);

    return {
      props: {
        post,
      },
      prerender: true,
    };
  }
</script>

<h1>{post.title}</h1>
<p>{post.content}</p>

Для генерации всех возможных страниц с динамическими маршрутами можно использовать метод prerender в связке с массивом возможных параметров:

// src/routes/posts/[slug].svelte
<script context="module" lang="ts">
  export async function load() {
    const posts = await fetchAllPosts();
    return {
      props: { posts },
      prerender: {
        entries: posts.map(post => `/posts/${post.slug}`)
      }
    };
  }
</script>

Этот код генерирует статические страницы для каждого поста, основанные на его slug.

Работа с данными при статической генерации

При статической генерации важно учитывать, как обрабатывать данные, которые требуются для страницы. В большинстве случаев данные можно загрузить во время сборки, используя асинхронные операции в функции load().

Существует несколько способов получения данных для статической генерации:

  1. API запросы. Данные можно загружать через HTTP-запросы в функцию load(). Например, можно получать данные о пользователях или постах с удаленного сервера.

  2. Локальные файлы. Для небольших проектов можно использовать данные, хранящиеся в локальных JSON файлах или других форматах.

  3. Статическое извлечение данных. Для некоторых данных, которые заранее известны (например, статичный список или небольшой набор записей), можно использовать простое определение данных непосредственно в файле компонента.

Публикация и развертывание

После того как проект собран и готов для развертывания, его можно опубликовать на любом сервере, который поддерживает статическое хостинг. Популярные хостинги для статических сайтов, такие как Vercel, Netlify или GitHub Pages, идеально подходят для развертывания сайтов, сгенерированных с помощью SvelteKit.

Для того чтобы опубликовать проект на Vercel, достаточно выполнить несколько простых шагов:

  1. Загрузить проект на GitHub или GitLab.
  2. Связать репозиторий с Vercel.
  3. Настроить параметры развертывания (например, указать команду сборки: npm run build).
  4. После завершения развертывания сайт будет доступен по URL, предоставленному Vercel.

Преимущества статической генерации

Статическая генерация с помощью SvelteKit имеет несколько ключевых преимуществ:

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

Заключение

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

Оглавление