Тело запроса

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

Архитектура Fresh

Fresh строится вокруг нескольких ключевых компонентов:

  1. Рендеринг на сервере (SSR) Fresh применяет серверный рендеринг для генерации HTML до того, как он отправляется клиенту. Это позволяет ускорить загрузку страниц и улучшить SEO. Основной принцип SSR в Fresh — рендеринг минимального объема JavaScript, необходимого для корректного отображения страницы.

  2. Ограничение клиентских состояний Fresh стремится к тому, чтобы клиент получал уже готовую HTML-структуру. Динамическое состояние и интерактивность добавляются только там, где это необходимо, через клиентские компоненты, что снижает нагрузку на браузер и уменьшает время до интерактивности.

  3. Маршрутизация Маршруты в Fresh строятся на основе файловой структуры проекта. Каждому файлу в директории routes соответствует URL-адрес. Это позволяет автоматически связывать URL с конкретной страницей или API-эндпоинтом без сложной конфигурации.

Компоненты Fresh

1. Страницы Страница — это функция, которая возвращает JSX или HTML. Страницы в Fresh могут использовать как статические данные, так и данные, полученные с сервера. Пример функции страницы:

export default function Page({ data }) {
    return (
        <div>
            <h1>{data.title}</h1>
            <p>{data.content}</p>
        </div>
    );
}

2. Роуты и API API-роуты в Fresh обрабатывают запросы методом GET, POST и другими. Роуты возвращают JSON, который может использоваться для динамических обновлений на клиенте. Пример API-роута:

export async function GET() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return new Response(JSON.stringify(data), {
        headers: { "Content-Type": "application/json" }
    });
}

3. Клиентские компоненты Компоненты, которые требуют интерактивности, могут быть помечены как клиентские. Они загружаются только на клиенте и подключаются к уже отрендеренному HTML. Такой подход позволяет сохранять производительность страницы и минимизировать объем JavaScript.

Работа с данными

Fresh использует несколько способов управления данными:

  • Статические данные (Static Props) Данные, известные на момент сборки проекта, могут быть встроены в HTML, что ускоряет загрузку и снижает количество запросов к серверу.

  • Динамические данные (Server-Side Props) Данные, которые нужно получать при каждом запросе, обрабатываются на сервере и интегрируются в страницу перед отправкой клиенту.

  • Клиентский запрос Для интерактивных компонентов данные могут запрашиваться на клиенте через API-роуты, что позволяет обновлять содержимое без перезагрузки страницы.

Интеграция с JavaScript

Fresh тесно интегрируется с современным JavaScript и JSX. Особенности работы:

  • Использование ES-модулей для импорта компонентов и утилит.
  • Поддержка TypeScript для типизации данных и компонентов.
  • Возможность работы с React-подобными компонентами, но без необходимости подключать весь React-рантайм на клиенте.

Пример использования клиентского компонента с интерактивностью:

/** @jsx h */
import { useState } from "preact/hooks";

export default function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onCl ick={() => setCount(count + 1)}>
            Счетчик: {count}
        </button>
    );
}

Производительность и оптимизация

Fresh проектируется с упором на скорость и минимизацию ресурсов. Основные механизмы оптимизации:

  • Минимизация JavaScript на клиенте Только интерактивные компоненты требуют загрузки скриптов. Остальная часть страницы остается статической.

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

  • Предзагрузка данных Fresh поддерживает предварительную загрузку данных для страниц, которые могут понадобиться пользователю при навигации, ускоряя переход между ними.

Сравнение с традиционными подходами

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

Заключение по архитектурным особенностям

Fresh сочетает серверный рендеринг, статические страницы и клиентскую интерактивность, обеспечивая гибкость и высокую производительность. Такой подход позволяет создавать современные веб-приложения, минимизируя лишние ресурсы и улучшая пользовательский опыт.

Оглавление