Полезные утилиты

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

1. Работа с маршрутами и обработкой запросов

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

  • Объект Context В каждом маршруте доступен объект ctx с ключевыми свойствами:

    • request — объект запроса (Request), поддерживает чтение тела, заголовков и параметров.
    • params — объект с динамическими сегментами маршрута ([id].tsx).
    • render — функция для рендеринга страницы с передачей данных в компонент.
export const handler: Handlers = {
  GET(ctx) {
    const { id } = ctx.params;
    return ctx.render({ id });
  }
};
  • Переадресация и ответы Утилита Response.redirect(url, status) позволяет возвращать перенаправления. Создание JSON-ответов осуществляется через Response.json(data):
return Response.json({ success: true });

2. Server-Side Rendering и рендеринг компонентов

Fresh ориентирован на SSR по умолчанию. Для работы с компонентами используются:

  • Функциональные компоненты Preact Любой компонент можно импортировать и передать данные из ctx.render:
export default function Page({ data }: { data: { id: string } }) {
  return <h1>ID: {data.id}</h1>;
}
  • Утилита ctx.renderNotFound() Позволяет вернуть 404 без необходимости вручную создавать ответ:
if (!user) {
  return ctx.renderNotFound();
}
  • Island компоненты Механизм изолированных интерактивных блоков, которые загружаются на клиенте только при необходимости, минимизируя объем JS.
import Counter from "../islands/Counter.tsx";
export default function Page() {
  return <Counter initial={0} />;
}

3. Работа с файлами и статическими ресурсами

Fresh автоматически обрабатывает статические файлы из каталога public. Утилиты для работы с ними включают:

  • Импорт статических ресурсов через URL:
import logoUrl from "../public/logo.png";
<img src={logoUrl} alt="Logo" />;
  • Проверка типа MIME с помощью std/media_types:
import { contentType } from "https://deno.land/std/media_types/mod.ts";

const type = contentType("example.png"); // image/png

4. Управление состоянием и кэширование

Fresh не использует глобальный state management по умолчанию, но предоставляет простые способы кэширования:

  • Edge кэширование с Cache-Control:
return new Response(html, {
  headers: {
    "Cache-Control": "max-age=3600",
    "Content-Type": "text/html",
  },
});
  • Серверные утилиты для хранения данных через встроенные Deno API: Deno.env, Deno.readTextFile, Deno.writeTextFile.

5. Полезные утилиты из стандартной библиотеки Deno

Fresh интегрирован с экосистемой Deno, что позволяет использовать множество стандартных модулей:

  • Работа с путями:
import { join, dirname } from "https://deno.land/std/path/mod.ts";
const fullPath = join(dirname(import.meta.url), "data.json");
  • Валидация и парсинг URL:
import { parse } from "https://deno.land/std/flags/mod.ts";
const args = parse(Deno.args);
  • Форматирование даты и времени:
import { format } from "https://deno.land/std/datetime/mod.ts";
const now = format(new Date(), "yyyy-MM-dd HH:mm:ss");

6. Генерация динамического контента

Fresh позволяет использовать серверные утилиты для генерации HTML, JSON и других форматов данных:

  • Динамический HTML:
const html = `<h1>${escape(data.title)}</h1>`;
return new Response(html, { headers: { "Content-Type": "text/html" } });
  • JSON API:
return Response.json({ message: "Hello World" });
  • Файловая отдача:
const file = await Deno.readFile("./public/file.pdf");
return new Response(file, { headers: { "Content-Type": "application/pdf" } });

7. Логирование и отладка

Fresh поддерживает стандартное логирование через console и расширенные возможности через модуль std/log:

import * as log from "https://deno.land/std/log/mod.ts";

await log.setup({
  handlers: {
    console: new log.handlers.ConsoleHandler("DEBUG"),
  },
  loggers: {
    default: {
      level: "DEBUG",
      handlers: ["console"],
    },
  },
});

log.info("Server started");

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

Fresh сочетает минимализм и мощь встроенных утилит, обеспечивая быструю разработку, высокую производительность и гибкую архитектуру для любых веб-проектов на Deno и Preact.

Оглавление