Что такое Fresh

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

Серверный рендеринг и нативная поддержка Deno

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

Серверный код запускается на Deno — современной платформе выполнения JavaScript и TypeScript, обеспечивающей безопасность по умолчанию, поддержку модулей через URL и встроенный менеджмент зависимостей без использования npm.

Архитектура и маршрутизация

Маршрутизация в Fresh строится на файловой системе. Каждая страница — это отдельный файл .tsx в каталоге routes. Путь к файлу напрямую соответствует URL-адресу. Например, файл routes/about.tsx соответствует URL /about.

Поддерживаются динамические маршруты через синтаксис [param].tsx. Значения параметров автоматически передаются компонентам страницы через объект params. Это позволяет создавать гибкие маршруты без дополнительной настройки роутера.

Компоненты и рендеринг

Компоненты в Fresh строятся на основе JSX и TypeScript. Важное отличие от React заключается в минимальной необходимости клиентского JavaScript. Компоненты по умолчанию рендерятся на сервере, и только интерактивные элементы могут иметь привязку к клиенту через директиву client:load или client:idle.

Пример простого компонента:

export default function HomePage() {
  return (
    <div>
      <h1>Главная страница</h1>
      <p>Добро пожаловать на сайт!</p>
    </div>
  );
}

Для интерактивных элементов можно включать клиентский скрипт выборочно:

<button client:load onCl ick={() => alert("Нажато!")}>Кликни меня</button>

Работа с данными: загрузка и предзагрузка

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

export const handler: Handlers = {
  async GET(req, ctx) {
    const data = await fetch("https://api.example.com/posts").then(res => res.json());
    return ctx.render({ posts: data });
  }
}

Данные, возвращённые из ctx.render, автоматически передаются в компонент страницы через пропсы.

Минимизация клиентского JavaScript

Одной из ключевых особенностей Fresh является принцип «zero-JS by default». Это значит, что страницы рендерятся с минимальным клиентским кодом. Скрипты подключаются только там, где требуется интерактивность. Такой подход снижает время загрузки, уменьшает потребление памяти и ускоряет работу приложений на мобильных устройствах.

Поддержка TypeScript и модульная структура

Fresh полностью поддерживает TypeScript без дополнительной конфигурации. Все файлы .ts и .tsx компилируются нативно Deno. Модули импортируются напрямую по URL или локальному пути, что исключает необходимость в package.json и node_modules.

import { serve } from "https://deno.land/std@0.192.0/http/server.ts";

serve(() => new Response("Hello Fresh"));

Такой подход делает структуру проекта прозрачной и облегчает управление зависимостями.

Хуки и состояния

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

Расширяемость и интеграции

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

Итоги архитектурных решений

  • Server-first: HTML формируется на сервере, минимальный JavaScript на клиенте.
  • Файловая маршрутизация: URL напрямую соответствует структуре файлов.
  • Оптимизация скорости: минимальные задержки загрузки, нативный SSR.
  • Безопасность: Deno обеспечивает sandboxing и строгие права доступа.
  • Гибкость: возможность selectively hydrates интерактивные элементы.

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

Оглавление