Параметры запроса

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

Формат параметров запроса

Параметры запроса (query parameters) — это часть URL после знака ?, представляющая собой набор пар ключ-значение, разделённых символом &:

https://example.com/page?user=123&theme=dark

Здесь user=123 и theme=dark являются параметрами запроса. В JavaScript для их работы используется объект URLSearchParams:

const url = new URL('https://example.com/page?user=123&theme=dark');
const params = new URLSearchParams(url.search);

const user = params.get('user'); // "123"
const theme = params.get('theme'); // "dark"

URLSearchParams поддерживает методы getAll, has, set, append и delete, что позволяет гибко управлять параметрами.

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

Fresh применяет подход без состояния (stateless) для рендеринга страниц. При передаче параметров запроса данные остаются «живыми», что позволяет обновлять компонент при изменении URL без полной перезагрузки.

Пример функции, которая извлекает параметры запроса в Fresh:

export function handler(req, ctx) {
  const url = new URL(req.url);
  const params = url.searchParams;

  const userId = params.get('user');
  const filter = params.get('filter');

  return ctx.render({ userId, filter });
}

Здесь ctx.render создаёт новый рендеринг компонента с актуальными параметрами запроса. Такой подход позволяет:

  • Извлекать значения параметров запроса напрямую.
  • Передавать их в компонент для динамического рендеринга.
  • Сохранять оптимизацию производительности без лишних перезагрузок.

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

В Fresh поддерживается динамическая маршрутизация через паттерны URL. Например, маршрут /users/[id] позволяет обрабатывать разные идентификаторы пользователей. Параметры запроса при этом доступны через объект URLSearchParams в функции обработчика:

export function handler(req, ctx) {
  const { id } = ctx.params; // динамический сегмент пути
  const search = new URL(req.url).searchParams;
  const sort = search.get('sort');

  return ctx.render({ id, sort });
}

Важно различать два вида данных:

  • Параметры пути (params) — часть URL, определяющая ресурс (/users/42 → id = 42).
  • Параметры запроса (searchParams) — дополнительные фильтры и опции (?sort=asc).

Управление параметрами запроса на клиенте

На клиентской стороне Fresh позволяет изменять URL без полной перезагрузки, сохраняя состояние приложения. Для этого используется объект URL и метод history.pushState или history.replaceState:

const params = new URLSearchParams(window.location.search);
params.set('page', '2');

const newUrl = `${window.location.pathname}?${params.toString()}`;
window.history.pushState({}, '', newUrl);

После изменения URL можно инициировать повторный рендеринг компонента с обновлёнными параметрами, используя встроенные механизмы Fresh:

export async function onLoad(ctx) {
  const params = new URL(ctx.request.url).searchParams;
  const page = params.get('page') || '1';

  return ctx.render({ page });
}

Практические рекомендации

  • Использовать URLSearchParams для удобного доступа и управления параметрами.
  • Разделять параметры пути и параметры запроса, чтобы избежать путаницы при маршрутизации.
  • При динамическом обновлении URL через pushState всегда обновлять компонент через рендеринг Fresh, чтобы данные оставались актуальными.
  • Обрабатывать отсутствующие параметры через значения по умолчанию или проверки null.

Работа с параметрами запроса в Fresh обеспечивает эффективное и реактивное управление данными в веб-приложении, снижает нагрузку на сервер и повышает отзывчивость интерфейса.

Оглавление