Глобальное состояние

Fresh — это современный подход к разработке веб-приложений на JavaScript, основанный на серверной генерации и статической оптимизации с минимальным количеством клиентского JavaScript. В основе концепции лежит принцип “server-first rendering”, где при каждой загрузке страницы предоставляется актуальный HTML, а интерактивность добавляется точечно через изолированные компоненты. Такой подход снижает время загрузки, уменьшает объем передаваемых данных и улучшает SEO.

Основные концепции Fresh

1. Изолированные компоненты Компоненты в Fresh создаются как отдельные модули, которые могут быть как серверными, так и частично интерактивными на клиенте. Каждый компонент отвечает только за свою область и не требует глобального состояния для базовой работы.

2. Минимальный клиентский JavaScript В отличие от SPA, Fresh передает на клиент только необходимый код для интерактивности. Это достигается с помощью технологии islands architecture, где интерактивные элементы («острова») монтируются поверх статически сгенерированного HTML.

3. Серверная генерация (SSR) и статическая генерация (SSG) Fresh поддерживает как SSR, так и SSG. SSR позволяет получать актуальный контент на сервере при каждом запросе, что особенно важно для динамических данных. SSG генерирует страницы на этапе сборки, что делает их максимально быстрыми и надежными.

Работа с глобальным состоянием

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

2. Использование серверных данных Все данные лучше хранить на сервере и передавать их компонентам через props. Это исключает необходимость использования глобального состояния для большинства задач и упрощает синхронизацию интерфейса с сервером.

3. Локальное состояние компонентов Если интерактивность требует состояния на клиенте, Fresh предлагает использовать reactive signals или встроенные хуки для управления локальным состоянием компонентов. Пример:

import { useState } from "preact/hooks";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onCl ick={() => setCount(count + 1)}>
      Нажато {count} раз
    </button>
  );
}

В этом примере состояние ограничено конкретным компонентом и не влияет на другие части приложения.

Передача данных между компонентами

Props Основной способ передачи данных в Fresh — это props. Они передаются сверху вниз, от родительского компонента к дочернему, что исключает необходимость глобальных переменных.

События и колбэки Для обратной связи дочерние компоненты могут использовать события или передавать функции колбэков через props:

function Child({ onAction }) {
  return <button onCl ick={onAction}>Действие</button>;
}

function Parent() {
  const handleAction = () => console.log("Действие выполнено");
  return <Child onAct ion={handleAction} />;
}

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

Подключение глобальных данных

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

// auth.js
export async function getUser(req) {
  // логика получения пользователя из сессии
}

// в компоненте
import { getUser } from "../services/auth.js";

export default async function Profile({ req }) {
  const user = await getUser(req);
  return <div>Привет, {user.name}</div>;
}

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

Реактивность без глобального состояния

Fresh поощряет реактивность на уровне компонентов. Каждое изменение состояния локально приводит к повторному рендеру только этого компонента, без пересоздания всей страницы. Это обеспечивает эффективное использование ресурсов и поддерживает быстрый отклик интерфейса.

Итоговые принципы управления состоянием в Fresh

  • Изоляция компонентов: состояние и логика локализованы.
  • Server-first: данные хранятся на сервере, клиент получает их через props.
  • Минимальный клиентский код: интерактивность добавляется только там, где это необходимо.
  • Контексты и сервисы: для глобальных данных применяются безопасные абстракции, а не глобальные переменные.
  • Реактивность на уровне компонентов: изменения отражаются локально без глобальной синхронизации.

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

Оглавление